When I have the following data supplied to Pie chart: [[0],[0],[0]], the chart is empty.
However, I want to make the pie show three slices, with each percentage distribution equal to 33.3%
I know it is better to use bar / column chart in this case, however I have this edge case where I need to show 0 data in Pie chart
Workaround:
Set some nonzero value and add isZero flag for every point. Then use this flag in tooltip.pointFormatter:
tooltip: {
pointFormatter: function() {
return "<span style='color:" + this.color + "'>\u25CF</span>" + this.series.name + ": <b>" + (this.options.isZero ? 0 : this.y) + "</b><br/>";
}
}
This will cause that your points will be visible and 0 will be printed in tooltip if the hovered point has isZero flag set to true.
Live demo: http://jsfiddle.net/BlackLabel/52a1xh99/
Related
I am using the latest version (9.3.2) of Highcharts as for now.
And I would like to know whether it is possible to make the text color of the two labels the same as the related pie has.
I didn't set any color in the settings and I believe it's a default color value created by highcharts itself.
You can use dataLabels.formatter function and define color for the data label as the same as for the point.
series: [{
...,
dataLabels: {
formatter: function() {
const point = this.point;
return '<span style="color: ' + point.color + '">' +
point.name + ': ' + point.y + '%</span>';
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/qnjevg7c/
API Reference: https://api.highcharts.com/highcharts/series.pie.dataLabels.formatter
We are using Highcharts to display data in column series combined with some spline series. All columns are clickable (to perform a drilldown) but some columns become unclickable because they are somewhat small and are entirely covered by the mouse tracking layer of the spline series.
It can be solved partially by disabling the mouse tracking in the spline series, but then the tooltip is not available for that series, and we need that.
What we need is that the column should be clickable through the mouse tracking layer of the spline series.
I've put an example on JS-fiddle to demonstrate the issue.
events: {
click: function ()
{
alert('I\'m Jane');
}
}
In this example, all 'Jane' columns are clickable, except for the second one (oranges) because it's too small and get's covered by the invisible mouseTracking layer of the spline series
Any suggestions?
As you mentionned, you need to disable the moustracking event for the spline series.
To retrieve all series in the tooltip you can use the following code:
tooltip: {
useHTML: true,
formatter: function () {
var s = '';
s += '<table style="border-style: hidden;border-collapse: collapse;">';
//get the chart object
var chart = this.points[0].series.chart;
//get the categories array
var categories = chart.xAxis[0].categories;
var index = 0;
//compute the index of corr y value in each data arrays
while (this.x !== categories[index]) { index++; }
//loop through series array
$.each(chart.series, function (i, series) {
s += '<tr><td style="color:' + series.color + '">' + series.name + ':</td>';
s += '<td style="text-align:right;color:' + series.color + '">';
s += series.data[index].y.toFixed();
s += '</td></tr>';
});
s += "</table>";
return s;
},
shared: true
}
I have 3 datasets within my series (low, normal, high) displaying on a scatter plot.
How can I force the tooltip and markers to be enabled only for the normal data set?
Many thanks
formatter: Function
Callback function to format the text of the tooltip. Return false to disable tooltip for a specific point on series.
Reference:
http://api.highcharts.com/highcharts#tooltip.formatter
See shared tooltip formatter. It gives you better control over the tooltip.
http://api.highcharts.com/highcharts#tooltip
EDIT: I have added some code. See the custom tooltip formatter;
tooltip: {
formatter: function () {
if (this.series.name == "Male") {
return "<b>" + this.series.name + "</b><br>" + this.x + " cm, " + this.y + " kg";
} else return " ";
}
}
See the fiddle for example: http://jsfiddle.net/androdify/cweC6/
This solution is for keeping tooltips on all series, but only display one tooltip at a time corresponding to the point actually hovered over.
Look through the code for where it is specifying a variable by the name of hoverPoints and change it to this:
{hoverPoint:l,hoverSeries:b,hoverPoints:l?[l]:[]}
This is the code for Highstock, so if you are using vanilla Highcharts you may need to change variable names around a bit. To explain how this works, the default value for hoverpoints is an array of all points on that spot on the x axis. Changing it to an array containing the single point that you actually hovered over, the value of hoverPoint, causes highcharts to ignore the other hit points.
I have a Highcharts line graph that has dataLabels configured in the plotOptions. This is all working well and I have a nice label displayed over each point.
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
return '$' + Highcharts.numberFormat(Math.round(this.y),0,0,",");
}
}
}
}
However, is there a way to set an interval that determines how often the dataLabels appear over the points? I want to show every point in my graph, but due to space constraints, only show the dataLabel every 2 or 3 points.
Edit:
Difficulty level: My graph has multiple y-axes, uses datetime for the x-axis, and has irregular data.
http://jsfiddle.net/SQkMW/68/
Yes, you could just return a blank string if the point x mod 2 is 0, for every 2nd to show up, for example (http://jsfiddle.net/HzYtV/):
formatter: function() {
if(this.point.x % 2 == 0) return '';
return this.y +'mm';
}
For datetime axis you will have to create a variable and increment it manually http://jsfiddle.net/SQkMW/69/
When styling a chart axis, a common style in publications is to include the unit or percentage sign only on the topmost label of the Y-axis. I am trying to figure out how to do this in Highcharts.
I know I can hard-code a number, like this:
yAxis: {
labels: {
formatter: function() {
if ( this.value == 12 ) {
return this.value + "%";
} else {
return this.value;
}
}
},
But this is not a very flexible solution.
Is there a way to test for the first (or nth) value displayed? Is there a way to get the index of a value within the formatter function?
2013 Update
This works in most circumstances:
if ( this.value == this.axis.getExtremes().max )
return this.value + '%';
else
return this.value;
However, it does not work if you have yAxis.endOnTick set to false—because in that case the maximum value of the axis is not the same as the highest label on the axis.
Is there a way to get that highest label from within the formatter function?
As far as I know, it isn't possible to find the 'nth' item on an axis, but first and last can be dome using the properties this.isFirst and this.isLast' in stead of checkingthis.value`
If you want to, you can also access the axis itself directly using this.axis, so you should be able to run whatever complex logic you want on the axis itself..
With 4.2.x version of highchart I have achieved it with following code
labels: {
formatter: function () {
if(this.isFirst)
return this.value + "%";
else
return this.value;
}
}
}
You could also add [%] to the name of the yAxis. Then you wouldn't have to tamper with the ticks.
You can draw at max value plotLine and after extremes are changed - remove and add new one). Then label for that plotLine you can set as '%' and move to the left side.
Another solution is to use axis title - set it to top and remove rotation.
The last solutions (or rather workaround) is to use second yAxis, and set there min and max(or tickPositions), and show only last label, and first hide.