Hello,
I’m using the Wisej chartJs extension. I don’t see a simple way to add the data value to a horizontal bar chart. I know the tooltip displays the value, but I’d like the data value to be always on. I’ve found several ways to accomplish this using javascript but I’m unsure how to integrate the javascript solution into my project, since using the extension. Do you have a suggestion on how to accomplish this? Thanks
Hi Ron,
WJ-9166 was added to our latest Wisej release (1.5.16).
Best regards
Frank
Hi Ron,
The DataLabel plugin will be part of the next release. Meanwhile, you can have a look at ChartJS example in GitHub repository.
Hi Ron,
Add data label feature logged as WJ-9166.
Hi Frank,
i also got the result am looking for by modifying the chart-2.7.1.js file by adding the following to the horizontal bar defaults_set f(x) (but i’m not crazy about this approach).
defaults._set(‘horizontalBar’, {
hover: {
mode: ‘index’,
axis: ‘y’
},
animation: {
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = ‘center’;
ctx.textBaseline = ‘bottom’;
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x + 20, bar._model.y – 5);
});
});
}
},
Hi Frank,
a couple of solutions I’ve seen can be found at
https://jsfiddle.net/4mxhogmd/1/
or
The pertinent part of the code is:
“onComplete”: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = ‘center’;
ctx.textBaseline = ‘bottom’;
this.data.datasets.forEach(function (dataset, i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x+20, bar._model.y – 5);
});
});
Hi Ron,
could you please send your javascript solution either here or to frankATiceteagroup.com and we´ll see how to match that with the Wisej extension ?
Thanks in advance.
Best regards
Frank
Please login first to submit.