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
Related
HighCharts: Tooltip is not visible in Bar chart for very small value
e.g.
If we have 2 columns, one has value 5000 and another has 1 then we are not able to see the bar for value 1 and tooltip for corresponding value is also not visible. Is there any provision to show the toolptip for all columns in Bar chart irrespective of column values?
If it works for your case, you can use a shared tooltip. This will display a tooltip whenever your mouse is in the column/bar area but will have all series values in the tooltip.
tooltip: {
shared: true,
},
API: https://api.highcharts.com/highcharts/tooltip.shared
Example: http://jsfiddle.net/5gu8mor7/
you need to set the minPointLength to see the small values
plotOptions: {
column: {
minPointLength: 10
}
}
you can set set it to smaller values, if you want those bars smaller
here is a full fiddle with how it works http://jsfiddle.net/tru0psqL/
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/
I use a bubble chart to present data and some of the data lables are hidden in the chart, while others are visible:
The blue bubble with no visible label does have one (as all the others) and it appears when some series are excluded. So this is really a display preference (and not a missing label).
The labels visibility is configured via
plotOptions: {
bubble: {
minSize: 30
},
series: {
dataLabels: {
enabled: true,
format: '{point.service}'
},
animation: false
}
},
Is there a parameter which can force the visibility? (even if it may impair the readability which is, I guess, the reason for highcharts to hide some labels).
You need to set allowOverlap option as true.
allowOverlap: Boolean
Whether to allow data labels to overlap. To make the labels less
sensitive for overlapping, the dataLabels.padding can be set to 0.
Defaults to false.
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.allowOverlap
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/