[CLOSED] ChartJS Datalabel Suggestion

Answered
0
0

Hi,
I am satisfied with the chartjs datalabel plugin, but I was curious that the display was left when I clicked on the legend.
So I added the following code to Wisej.Web.Ext.ChartJs’ dataLabelPlugin.js and it got the behavior I wanted.

 


// Define a plugin to provide data labels
Chart.plugins.register({
id: ‘dataLabel’,

afterDatasetsDraw: function (chart) {
var ctx = chart.ctx;

chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i);
if (chart.config.options.dataLabel != undefined && chart.config.options.dataLabel.display) {

if (!meta.hidden) {

meta.data.forEach(function (element, index) {

if (!meta.data[index].hidden) {

// Draw the text in black, with the specified font
ctx.fillStyle = ‘rgb(0, 0, 0)’;

var fontSize = chart.config.options.dataLabel.fontSize;
var fontStyle = chart.config.options.dataLabel.fontStyle;
var fontFamily = chart.config.options.dataLabel.fontFamily;

ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

// Just naively convert to string for now
var dataString = dataset.data[index].toString();

// Make sure alignment settings are correct
ctx.textAlign = ‘center’;
ctx.textBaseline = ‘middle’;

var padding = 5;
var position = element.tooltipPosition();
ctx.fillText(dataString, position.x, position.y – (fontSize / 2) – padding);

}

});

}
}
});
}
});


How about such remodeling?

Thanks in advance

 

  • You must to post comments
Best Answer
0
0

Hi Masafumi,

I’ll have a look at your suggestion. Thanks.

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.