Can you please demonstrate a use case for this property in the pie chart:
http://api.highcharts.com/highcharts#Point.total
How it can be used?
Here you are: http://jsfiddle.net/tu67e1ce/
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>, Total: {point.total}'
},
Hover any of the slices, and see total value in the tooltip. You can also use that value in the data labels formatter etc.
Related
I use Windbarbs in my charts. However, the data for the windbarbs must be in m/s and therefore the tooltips show the same unit.
I want to display the km/h figure and unit in the tooltip. I use the code:
thisChart.addSeries({
name: 'WindBarbs',
xAxis: 1,
color: 'black',
type: 'windbarb',
visible: true,
dataGrouping: {
enabled: true,
units: [
['hour', [3]]
]
},
tooltip: {
pointFormat: '{series.name}: {point.y * 3.6}',
valueSuffix: ' km/h',
},
data: WindBarbData
}, false);
However this does not work.
What do I do wrong, how to accomplish this?
NOTE: Windbarbs as tag does not exist. Cannot create it.
This behavior don't occurs due to valueSuffix but because of two mistakes in tooltip.pointFormat.
First of all, in pointFormat option should be used point.value instead of point.y.
Demo:
https://jsfiddle.net/BlackLabel/u5pw83mf/
API Reference:
https://api.highcharts.com/highcharts/series.windbarb.tooltip.pointFormat
Secondly, multiplication is not possible in the pointFormat option. If you need to make some calculations, use pointFormatter to achieve that.
Demo:
https://jsfiddle.net/BlackLabel/0Ljumyan/
API Reference:
https://api.highcharts.com/highcharts/tooltip.pointFormatter
Would love some help here with highcharts,i have attached an image i want to accomplish 2 things here
First: Is it possible to place the data of the yAxis in this case a day between 2 plotlines and the datalabel in between those 2 lines instead of getting crossed in the middle by it? For example i want the 30th of April under that line and the datalabel above that line as well positioned according to the day
Second: How can i change the color of the numbers to black when the color is that light green, it makes it hard to read.
You can set yAxis.type as category and use formatter to imitate dates.
Use dataLabels.formatter to change a color depending on a point value.
series: [{
...,
dataLabels: {
enabled: true,
formatter: function() {
if (this.color === '#FF00FF') {
return '<span style="color: orange">' + this.y + '</span>';
}
return this.y;
}
}
}],
yAxis: {
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/qxfa9b0c/1/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.heatmap.dataLabels.formatter
Sorry for my english.
I have question about highcharts. Please help!
I have chart https://jsfiddle.net/traprap/upmvyjkt/5/
In this chart I have numbers like 0.00000057
But in chart tooltip this numbers converting to 57e-7
tooltip: {
valueDecimals: 8
}
not helping
I tried point format, formatter.. but nothing helped
What em I doing wrong?
Thank You!
To format it for a single series you can use the series.tooltip.pointFormatter (API) in combination with toFixed (API) to show the number with your chosen number of decimals. If you want to format all series you can use plotOptions.series.tooltip.pointFormatter (API) with the same function.
For example (JSFiddle):
series: [{
data: price,
tooltip: {
pointFormatter: function() {
return '<span style="color:{point.color}">\u25CF</span> '+this.series.name+': <b>'+this.y.toFixed(8)+'</b><br/>'
}
},
// ...
}]
This is essentially the default point format of:
<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>
With variables for series name and the y-value with toFixed(8) to show 8 decimals, as an example. This converts the number to a string before it is shown, preventing the scientific notation.
I have a boxplot with a scatter plot of the raw values drawn on top of it. I'd like to change the boxplot tooltip (when you mouse over) to display the total number of points in the scatter series.
tooltip: {
useHTML: true,
headFormat: '{point.key}',
pointFormat: 'Median: {point.median}'
}
point and series are for the boxplot, is there a way to reference another series like series[1] and how would you get the total. Or can I reference an array with the total values.
Similar to How to edit the tooltip text in a highcharts boxplot
this.series contains a reference to the chart object, which in turn has a reference to the chart.series array.
tooltip: {
formatter: function() {
var arrayOfSeries = this.series.chart.series;
console.log(arrayOfSeries); // doing something with all the series!
}
},
Fiddle here.
According to formatter, you can reference to the series object via this.series. So for the total number of points in the series, you can try
tooltip: {
formatter: function() {
return this.series.data.length;
}
},
It seems shared tooltip doesn't work on scatter, https://github.com/highslide-software/highcharts.com/issues/1431. So I don't know how to reference another series. Otherwise you can use this.points[i].series.
I am using Highcharts graph to display a pie chart. I want to change the tooltip to display the actual data field along with the series name in place of the percentage value.
Here is the sample at jsFiddle
If you check the above sample you will find 2 things
Tooltip is : pointFormat: '{series.name}: {point.percentage}%' i.e.
Browser share: some-percentage-value
I want to show:
Browser share: 40 (data value instead of percentage)
2. Next is the the display text for each section in the pie. One can see n number of decimals making the graph look very ugly.
I want to show numbers only upto 2 decimal points like percentageDecimals: 1 used in tooltip.
I tried few things for 1st like series.data which returns an array of objects. Also series.data[0]. But no success so far
How can I do both these things?
You can use Format Strings to help you format numbers and dates.
x Decimal Places
View the JSFiddle
// point.percentage = 29.9345816
pointFormat: '{point.percentage:.0f}%' // returns: `30%` - (rounds to nearest)
pointFormat: '{point.percentage:.1f}%' // returns: `29.9%`
pointFormat: '{point.percentage:.2f}%' // returns: `29.93%`
pointFormat: '{point.percentage:.3f}%' // returns: `29.935%`
Thousands separator
View the JSFiddle
// point.percentage = 1029.9
{point.percentage:,.0f} // returns: `1,030`
{point.percentage:,.1f} // returns: `1,029.9`
Read More in the documentation:
Documentation: http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
You can change it so it shows the data value instead by modifying your tooltip pointFormat from pointFormat: '{series.name}: <b>{point.percentage}%</b>', to pointFormat: '{series.name}: <b>{point.y}%</b>',
You can round the numbers by using the Highcharts.numberFormat() function like so in your formatter:
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +' %';
}
Here is a detailed description about tooltip formatter http://api.highcharts.com/highcharts#tooltip.formatter
this.point (not shared) / this.points[i].point (shared)
And try this.points[i].point if this.point didn't work
Simplest approach to show the actual data values is to omit the formatter function. The tooltip will default to show the actual data.