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.
Related
So this is my current demo - http://jsfiddle.net/use9mdwz/
A bunch of events happen within one minute or so and then the final event happens a few minutes later which makes the point distribution uneven.
The dates in my set are iso 8601 ie "2023-01-19T01:25:31.749Z" and converted to milliseconds new Date(dateFormat).getTime()
If I do not convert the dates the chart actually looks alright - http://jsfiddle.net/8u42bLwg/ but I am loosing the dates on the X axis.
How can I make it look like on the second demo but with proper timestamps?
You can use category axis type and format labels in the way you want. For example:
xAxis: {
type: 'category',
labels: {
// format: '{value:%Y-%m-%d}',
formatter: function() {
const date = new Date(this.value);
const datevalues = [
date.getFullYear(),
date.getMonth() + 1,
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds()
];
return `${datevalues[3]}:${datevalues[4]}:${datevalues[5]}<br> ${datevalues[2]}-${datevalues[1]}-${datevalues[0]}`
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/jsyu1q04/
API Reference: https://api.highcharts.com/highcharts/xAxis.type
Docs: https://www.highcharts.com/docs/chart-concepts/axes#axis-types
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
I am using a Area/line chart and plotting for 2 points. Also using a xAxis Label formatter property for customizing the label to display as follows. But when using this the chart is not generated. And also I tried to remove the formatter property, the chart id generated but the xAxis label is displayed as 0.5 [At least we need to get label text from categories]. I have included 2 jsfiddle url where we tried two approaches. Please help and provide solution for displaying the xAxis label what we provided in the categories.
JsFiddle:
http://jsfiddle.net/jw2p5Lxa/17/
http://jsfiddle.net/p2EYM/116/
labels: {
formatter: function() {
return this.value.substring(0, this.value.indexOf('_'));
}
Thanks in advance!
You've essentially told the chart, with your min and max values, to cut off the first and last label.
Get rid of this:
min: 0.5,
max: categories.length - 1.5,
And use this:
minPadding:0,
maxPadding:0,
Updated Fiddle:
http://jsfiddle.net/jlbriggs/p2EYM/118/
Output:
You can save categories in an array and use xAxis.formater() to display specific label in your first example:
var categories = ['Jan 12_Jan 12', 'Feb 12_Feb 12'];
formatter: function() {
return categories[this.value];
}
Also, do not use min and max properties. In the second example getting rid of min/max should be enough.
Examples:
http://jsfiddle.net/jw2p5Lxa/21/
http://jsfiddle.net/p2EYM/120/
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.
Two Part Q:
Why is high charts not correctly aligning and displaying the following date on the x axis?
How can I align the date on the x axis with the points in each series?
I have tried adjusting to tickinterval to various values but to no avail on either issue.
tickPixelInterval: 200
Fiddle->http://jsfiddle.net/EwpWh/
Use datetime axis instead of linear, see: http://jsfiddle.net/Fusher/EwpWh/5/
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%m/%d', this.value);
}
},
tickPixelInterval: 200
},
However if you want to have ticks exactly in the same place as points are, you need to use one of:
tickPositions: http://api.highcharts.com/highstock#xAxis.tickPositions
tickPositioner: http://api.highcharts.com/highstock#xAxis.tickPositioner