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
Related
if I have a large amount of data then the xAxis label is not showing properly. you can see in this code: https://jsfiddle.net/4nvmuc25/127/
if I have a low amount of data then it's fine my xAxis label is showing correctly.
so I want to show the xAxis label properly if I have a large amount of data.
Restriction: 1:you can't change the rotation property for xAxis.
2:xAxis labels should not intercept each other.
3:you can't do by css.
Not restriction: you can set tickInterval, step property in xAxis but remember the amount of data is dynamic, it could be any number.
You should not use category x-axis type in this case. In API we can read:
step: number
...
By default, when 0, the step is calculated automatically to avoid
overlap. To prevent this, set it to 1. This usually only happens on a
category axis, and is often a sign that you have chosen the wrong axis
type.
As a solution use linear axis with a custom formatter function for labels:
const labels = [
"Apr-1",
"May-2",
...
];
Highcharts.chart('container', {
xAxis: {
...,
labels: {
...,
formatter: function() {
return labels[this.pos]
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/Lk8aogpq/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels
using highcharts#9.1.1
I am rendering a chart with initial rangeSelector = 1y but it's not rendering properly, the chart selects the last year of data instead of the first year. my data is ordered asc by timestamp btw.
same happens when I explicitly select a range, it computes the range from the current end date in the slider as opposed to the start date.
how can I make it behave differently?
https://jsfiddle.net/6vLgdrx7/4/
You can use setExtremes method in chart's load event and set the initial selected area.
chart: {
...,
events: {
load: function() {
const xAxis = this.xAxis[0];
xAxis.setExtremes(
xAxis.dataMin,
xAxis.dataMin + (xAxis.max - xAxis.min),
true,
false
);
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/hm4xLzft/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
I have two charts here where I was using static data for the candles. Let's consider the second Y-axis, where the max value for the few given candles is 215.
In the code I provided, the max value for this y Axes are set as:
yAxis: [{
...
}, {
max: 215*4
}],
From where we can see that I am hardcoding the value for the max as 215*4. What I need to do is, to be able to dynamically get the current value and to multiply it by 4.
I tried it like:
yAxis: [{
...
}, {
max: this.getExtremes().dataMax * 4
}],
But seems is not working and seems that this.getExtremes() can be used in the events only. So is there any way how can I accomplish to set up max value depending on the current displayed max value?
I also tried the following (but it still does not work).
render: function() {
let yAxisExtremesVolumeMax = this.yAxis[1].getExtremes().dataMax;
this.yAxis[1].update({
max: yAxisExtremesVolumeMax * 4
});
},
Anyway, I am not sure that I want to check it this way, since the render event can be called too many times, so I prefer other alternatives.
Try to use this solution with the load instead the render. Doing update in the render callback creates the infinity loop. Code:
chart: {
events: {
load() {
let chart = this,
max = chart.series[1].dataMax;
chart.yAxis[1].update({
max: max * 4
})
}
}
},
Demo: https://jsfiddle.net/BlackLabel/c6qjnf5z/
Try to use this solution...
load: function () {
let { min, max } = this.yAxis[1].getExtremes();
max = max * 4;
this.yAxis[1].setExtremes(min, max);
}
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/
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.