I want to format the yAxis label and add trailing zeros after decimal. The number of precision will be decided dynamically as per the value of yAxis labels.
For Example: If there are 3 labels in yAxis with value 95.8, 95.825, and 95.85. then, it should be displayed as 95.800, 95.825, 95.850.
Edit:
Actually, the requirement is to have the decimal precision dynamically. Actually sometimes, our chart shows labels as 93,94,95, in this case we don't want to add precision. The idea is to add same precision, if the chart is generating, yAxis labels like 94.25, 94.5, 94.75, then, I want the chart to show yAxis labels as 94.24, 94.50, 94.75.
For dataLabels there are some format parameters you can add to your y values.
You can add this to the plotOptions structure like this:
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y:.3f}' // <<< .3f is 3 decimal places out.
}
}
},
Here is a modified fiddle:
http://jsfiddle.net/ja799vep/
More details from highcharts.com:
http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
EDIT:
Sorry the example above was just for datalabels...Here is an improved example that shows, xAxis, yAxis, dataLables and toolTip with different '3 decimal place' approaches.
http://jsfiddle.net/franktudor/okce7p7n/
Related
I'm trying to use labelFormat in my Highcharts Pie chart to add the y value of my series to the legend name. I haven't been able to. My question is very similar to this one, except I want the actual y value instead of a percentage. Thank you for your time.
Here's what I have so far, except I don't want percentage. I want the actual value:
legend: {
labelFormat: '{name} ({percentage:.0f})',
},
Try to use this code instead, where 2f is a number of decimals value:
Demo: https://jsfiddle.net/BlackLabel/ukc1tf3p/
legend: {
labelFormat: '{name} {y:.2f}',
},
API: https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#format-strings
I have a stock price chart with variance along xAxis (its a special chart). I want to plot this variance as histogram.I can draw it successfully but I can't get rid of the space between histogram columns. fiddle here https://jsfiddle.net/Lng1w0my/1/ (click on price series to generate histogram)
I have set
groupPadding: 0,
pointPadding: 0
but doesn't work.
I tried a simpler fiddle https://jsfiddle.net/hpdru52b/1/ And this one works fine.
I can't find what is the difference.
Any help is highly appreciated.
You need to set ordinal option to false:
xAxis: {
ordinal: false
}
Live demo: https://jsfiddle.net/BlackLabel/ush37qox/
API Reference: https://api.highcharts.com/highstock/xAxis
I use the highchart "bar with negative stack": http://www.highcharts.com/demo/bar-negative-stack
I only work with integer numbers, not with floats. My x-Axis looks like this for smaller numbers:
My question:
How can I get rid off the floats and only show full numbers, like so:
I could not find the related option in the API documentation and also researching did not get me any results.
Set allowDecimals: false , It wont show decimal part. In case of X-axis you can define TickInterval: to an integer value to avoid fractional part
As he said, by putting your tickInterval to whole numbers you can achieve the result.
code :
$(function () {
$('#container').highcharts({
xAxis: {
tickInterval: 1
},
In chart, the x-axis labels are overlapping, when chart data is big.
I have used "step" property as follows :
xAxis: {
labels:{
step: (stepVal ? stepVal : 0),
},
}
I calculate the value of stepVal, depending upon data.
This resolves the issue of overlapping labels on x-axis.
But, when I zoom the chart, I want to see all the labels on x-axis.
How to get it?
In Highcharts 3.0 you can use
chart.xAxis[0].update({
labels: {
step: newValue
}
}
for updating step. Just setting new value in options for new chart won't work.
I believe what you are looking for is this..
http://api.highcharts.com/highcharts#chart.events.selection
You would need to change the xAxis labels steps in the event of a zoom action. You will need to determine how many labels you would want to show, based on how many labels are visible as a result of the zoom.
I have an odd request. My boss wants me to improve an existing chart with a second axis.
The blue area must define the scale of the second axis, like a percentage of completion for the reading of the green area. The 100% value must be at the maximum of the blue area. I can collect the highest value of the blue area without any trouble, but I don't know how to set the properties of the second axis according to this value. The thing is that the second axis does not have any data associated, therefore, he isn't shown...
Any idea ?
PS : I tried to be as clear as possible, but maybe that was not the case. Don't hesitate to tell me if you need more explanations.
You can use axis.linkedTo to get a second axis and data formatters to get the data formatted as percentages.
I'm not modifying the series data, only changing the text shown in the second yAxis scale, the tooltip and the data labels.
yAxis: [{
// Default options
}, {
linkedTo: 0,
opposite: true,
labels: {
formatter: function () {
return formatPercent(this.value);
}
}
}]
Example on jsFiddle: http://jsfiddle.net/uPHZx/