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
Hi Masafumi,
I’ll have a look at your suggestion. Thanks.
Please login first to submit.