Highcharts - Possible to change the text zoom to other wording? - highcharts

Is it possible to change the "Zoom" text in Highcharts to a custom text?

You can use setOptions to apply a lang parameter.
Highcharts.setOptions({
lang:{
resetZoom: 'your own text',
resetZoomTitle: 'your own zoom title'
}
});

Related

How can I plot the x-axis on a highchart like this?

I'm building a chart using the highcharts javascript library
I'm expecting to get a chart like
And here's what I already have. enter link description here
enter code here
You define x values on a categorized axis and because of the default pointPlacement, your chart is distorted. You can change pointRange, but in that case, I would recommend removing axis type (the linear will be by default) and set series.pointPlacement to between
plotOptions: {
column: {
pointPlacement: "between"
}
},
The label's position can be set by xAxis.labels.x option.
Demo:
https://jsfiddle.net/BlackLabel/a4qs7dp9/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/xAxis.labels.x

How to give proper number denominations in highcharts buuble chart

I am using bubble chart from highcharts. If i hover over a bubble it shows the tooltip information.In that, the "sugar intake" value is appearing with a space in between to represent denominations as 9 500.
Is there a way to change that to 9,500 ?
https://jsfiddle.net/t48xyg9o/1/
Please refer this image
bubblechart
Following the documentation, you can change the thousand separator like this
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});

Append to default highcharts tooltip

I have a line graph with the y-axis set to category and x-axis to values. On hovering over a point , i get the default tooltip information like in
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-point-events-mouseover/ when
tooltip: {
enabled: true
}
My y-axis is set to some label like "Seconds" or "FPS". I want to be able to just add the y-axis label text to the default tooltip without changing any formatting options in the default tootlip, so for example if you hover over the first point it should display 29.9 Seconds along with the other data keeping other contents unaltered.
I know you can use a formatter and override it but I would like to retain the original tooltip display which shows up when you dont override the formatter.
Add valueSuffix, Change your tooltip to this: Read Here
tooltip: {
enabled: true,
valueSuffix: ' Seconds',
}
DEMO

What's the difference between 'legend' and 'showInLegend' in highcharts

What's the difference for 'pie'.
{legend: {enabled: true}}
and
{plotOptions: {pie: {showInLegend: true}}}
Legend; is an option which allows you to change all the settings about the legend. (color, border width, shadow, padding, margin etc.)
plotOptions.pie.showInLegend is a boolean if a particular serie is going to be shown in the legend or not.

Add data to a legend, with different format? Or should I use a label?

I am experimenting with the legend; trying to get as result, a panel where I display data about the chart.
I am planning to add the last value, and min and max.
Looking for some examples, and I found one that use a function called labelFormatter, altho I am not having luck in understanding how does it works.
I need to have values with different text color and different size, so I am not even sure if I can use the title of the legend for this purpose, or if I should hide the legend and create directly a label (altho the issue then is related to moving and resizing, right? Since the legend update its position if the chart window is resized).
Which is the best way to do what I am planning to do? a label or the legend?
If you are considering adding HTML elements into the chart plot area then you will have to use Highcharts Renderer API.
You can refer this JSFIDDLE working demo
it works like:
var chart = new Highcharts.Chart({
....
.....
......
}, function(chart) { // on complete
chart.renderer.text('This text is <span style="color: red">styled</span> and linked', 150, 80)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});

Resources