Could anyone tell us how to include the min. and max. values of the X-Axis in the tool tips.
For example if the chart is showing dates from April 2018 to April 2019 we would like to include this information within the tool tips for each series.
Many thanks
Use the tooltip.formatter feature to customize the tooltip and attach that information in it.
Demo: https://jsfiddle.net/BlackLabel/5n38s1jx/
tooltip: {
formatter() {
let point = this,
xAxis = this.series.xAxis,
output;
output = `<span style='font-size: 10px'>${point.key}</span><br/>
<span style="color:${point.color}">●</span> ${point.series.name}: <b>${point.y}</b><br/>
xAxis min: ${xAxis.min} && xAxis max: ${xAxis.max}`
return output
}
},
API: https://api.highcharts.com/highcharts/tooltip.formatter
Related
I've implemented a Gantt chart that contains some Gantt long bars and their time period is usually more than a couple of months, moreover, the xAxis of the chart shows years and months as you can see below gif. XAxis's tick-interval should change automatically when I change the range of the Gantt period, but it doesn't!
The desired way is that if I change the time range to a month or smaller, xAxis's tick-interval should change to month/week or month/day.
xAxis: {
maxPadding: 0,
max: Date.UTC(2024, 07, 16),
plotLines: [
// some lines
]
}
Ticks on the xAxis are calculated based on the provided data.
When your data range is wide, the ticks also tend to cover a wider period of time. To change default behaviour you might set the tickInterval inside the afterSetExtremes function with the use of the update method.
Inside you might specify some conditions like for example visible range.
events: {
afterSetExtremes: function(e) {
if (this.chart.xAxis[1].max - this.chart.xAxis[1].min < 36e8) {
this.update({
tickInterval: 36e7
})
} else {
this.update({
tickInterval: undefined
})
this.chart.xAxis[1].update({
tickInterval: undefined
})
}
}
}
API:
https://api.highcharts.com/gantt/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Axis#update
Live demo: https://jsfiddle.net/BlackLabel/9poc65fn/
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 problem with build chart in highchart.js.
I need a BarChart and I have array with milliseconds.
How I need to tune my yAxis that it show me data in format (MM:SS)?
I readed http://stackoverflow.com/questions/18463287/timeline-yaxis-format-with-minutesseconds-only but it didn't resolve my issue.
Fiddle example: http://jsfiddle.net/abruilo/uoqwm9cn/
Please note on yAxis data. How I can change it?
Thanks.
You can use labels.formatter and return date in Highcharts.dateFormat().
yAxis: {
type: 'datetime',
labels:{
formatter:function(){
return Highcharts.dateFormat('%H:%M',this.value);
}
}
},
http://jsfiddle.net/jrstm7ga/
This is how the chart looks like at the moment:
http://jsfiddle.net/VunVq/1/
On the x axis instead displaying the full date, I just want to display year.
e.g 2008 2009 2010
The tooltip should display the full date though.
xAxis: {
categories: ['2008-03-31', '2009-03-31', '2010-03-31']
},
I read the api reference but cannot figure out how to display only year in x axis, maybe because its past my bedtime and my mind is not working.
Use the label's formatter callback JavaScript function to format the label.
xAxis: {
categories: ['2008-03-31', '2009-03-31', '2010-03-31'],
labels: {
formatter: function () {
return this.value.split('-')[0];
}
}
}
DEMO
You can also set type xaxis as datetime (http://api.highcharts.com/highcharts#xAxis.type) and use pointStart() / pointInterval for series.