How can I show custom labels permanently in a Chart.JS doughnut chart using chartjs-plugin-datalabels?
The example looks now like this:
Under https://chartjs-plugin-datalabels.netlify.com/guide/formatting.html#data-transformation, I found that the following code should change the labels to custom formatting:
formatter: function(value, context) {
return context.dataIndex + ': ' + Math.round(value*100) + '%';
}
Why doesn't this work in the example fiddle: https://jsfiddle.net/o4kyt69j/1/?
Okay, I didn't read properly...
Here's the solution: https://jsfiddle.net/o4kyt69j/2/
The code should be:
options: {
plugins: {
datalabels: {
formatter: function(value) {
return value + " kWh";
}
}
}
}
Related
I am trying to plot time-series data using Highcharts histogram & would like to have some way to highlight the bar that contains the latest datapoint (it will be the last element in the array) and also have a custom tooltip for the same.
So let's say I am plotting average daily temperatures for a city over a 1 year period -- how would I highlight the bar that contains the latest temperature & also provide a tooltip that indicates the same.
Lets say, in THIS Highcharts example the last 3 in the data array is the latest temperature & I would like to highlight, as well as provide a custom tooltip for the bar with that value.
Something similar has been discussed HERE but it doesn't talk about highlighting the relevant bar.
You can update the last point in load event and add a flag to distinguish it in the tooltip's formatter function:
chart: {
events: {
load: function() {
var histogramSeries = this.series[0],
lastPoint = histogramSeries.points[histogramSeries.points.length - 1];
lastPoint.update({
color: 'red'
});
lastPoint.isLast = true;
}
}
},
tooltip: {
formatter: function() {
if (this.point.isLast) {
return '<b>Last point result: </b> ' + this.y;
}
return '<span style="color:' + this.series.color + '">' + this.series.name + '</span>: <b>' + this.y + '</b><br/>';
}
}
Live demo: https://jsfiddle.net/BlackLabel/cefy419v/
API Reference:
https://api.highcharts.com/highcharts/tooltip.formatter
https://api.highcharts.com/class-reference/Highcharts.Point#update
I would like to rotate only firt and last label in x-axis.
I have following formatter function:
formatter() {
if (this.isFirst || this.isLast) {
// First or last label here
var rotatedValue = this.value.doRotation(); // TODO here
return rotatedValue;
} else {
return this.axis.defaultLabelFormatter.call(this);
}
},
I did a research but nothing found (how call some rotation function).
I use a basic line chart.
You can set xAxis.labels.useHTML option to true and style these labels via CSS3:
xAxis: {
labels: {
useHTML: true
}
},
chart: {
events: {
load: function() {
var div = this.xAxis[0].labelGroup.div;
div.firstChild.style.transform = "rotate(30deg)";
div.lastChild.style.transform = "rotate(30deg)";
}
}
}
Live working demo: http://jsfiddle.net/kkulig/fepj1f5g/
API reference: http://api.highcharts.com/highcharts/xAxis.labels.useHTML
Hi how to display data on hover inside doughnut chart using Angular Chart
Something like this:
Extend the answer of Alesana from this:
How to add text inside the doughnut chart using Chart.js?
and register an additional plugin service:
Chart.pluginService.register({
beforeTooltipDraw: function(chart) {
if (chart.config.options.elements.center) {
if (chart.tooltip._active && chart.tooltip._active.length > 0) {
chart.config.options.elements.center.text =
chart.tooltip._active[0]._view.label + ':' + chart.tooltip._data.datasets[0].data[chart.tooltip._active[0]._index];
}
}
}
});
For the chart, you may also want to put:
options: {
tooltips: { enabled: false }
}
I know that it may not be a good idea to use _view, _data, etc. Please correct this to a better way to access the label and dataset values.
I need to use several series in tooltip in a highchart chart. These series should be completely invisible except tooltip. I 've tried setting visible to false. However in this case, legends for that series are still visible though faded. If I state "ignoreHiddenSeries: true", hidden series are not there at all and I cannot use them at tooltip. Is there a way for this type of usage? Currently I am keeping those series in global javascript arrays outside the highchart's scope and using them in tooltip formatter. I prefer to keep those data in highchart as well.
By the way setting showInLegend: false, visible: false also makes the series unusable in tooltip.
Each invisible serie should have two params:
visible: false,
showInLegend: false,
You need to use the tooltip formatter and use loop over each serie / each point to print values.
tooltip: {
formatter: function() {
var series = this.series.chart.series,
x = this.x,
each = Highcharts.each,
txt = '<span style="font-size: 10px">' + this.key + '</span><br/>';
each(series, function(serie, i) {
each(serie.data, function(data, j){
if(data.x === x) {
txt += '<span style="color:' + data.color + '">\u25CF</span> ' + data.series.name + ': <b>' + data.y + '</b><br/>';
}
});
});
return txt;
}
},
Example: http://jsfiddle.net/697e8seo/
I have an inverted columnrange chart in highcharts. I am able to create a unique label for the low and high point for each range.
But as the chart gets longer I would like to label each on the columns by their series name.
I need a third label? Possibly something above each range that would display the name of the series. So far, I'm using the formatter to give each point a unique label.
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.y === this.point.low) {
return 'low: ' + this.y;
}
if (this.y === this.point.high) {
return 'high: ' + this.y;
}
return 'blah';
}
}
}
},
My fiddle: http://jsfiddle.net/zeus6ky9/6/
I ended up adding an additional invisible series for each series already there. And creating a label for it.