sokida
Reputation: 539
Highchart with date range
I use highchart with react js, in the X axis I have dates in days, when the period is very long the x axis becomes with points and the display does not work, is there a possibility that highchart manages this case when I give it the dates it displays them on the x axis it escapes dates between them
My options
const options = {
chart: {
type: "line",
},
title: {
text: "",
},
subtitle: {
text: "",
},
xAxis: {
categories:[
"2022-09-21",
"2022-09-22",
"2022-09-23",
"2022-09-24",
"2022-09-25",
"2022-09-26",
"2022-09-27",
"2022-09-28",
"2022-09-29",
"2022-09-30",
"2022-10-01",
"2022-10-02",
"2022-10-03",
"2022-10-04",
"2022-10-05",
"2022-10-06",
"2022-10-07",
"2022-10-08",
"2022-10-09",
"2022-10-10",
"2022-10-11",
"2022-10-12",
"2022-10-13",
"2022-10-14",
"2022-10-15",
"2022-10-16",
"2022-10-17",
"2022-10-18",
"2022-10-19",
"2022-10-20",
"2022-10-21",
"2022-10-22",
"2022-10-23",
"2022-10-24",
"2022-10-25",
"2022-10-26",
"2022-10-27",
"2022-10-28",
"2022-10-29",
"2022-10-30",
"2022-10-31",
"2022-11-01",
"2022-11-02",
"2022-11-03",
"2022-11-04",
"2022-11-05",
"2022-11-06",
"2022-11-07",
"2022-11-08",
"2022-11-09",
"2022-11-10",
"2022-11-11",
"2022-11-12",
"2022-11-13",
"2022-11-14",
"2022-11-15",
"2022-11-16",
"2022-11-17",
"2022-11-18",
"2022-11-19",
"2022-11-20",
"2022-11-21",
"2022-11-22",
"2022-11-23",
"2022-11-24",
"2022-11-25",
"2022-11-26",
"2022-11-27",
"2022-11-28",
"2022-11-29",
"2022-11-30",
"2022-12-01",
"2022-12-02",
"2022-12-03",
"2022-12-04",
"2022-12-05",
"2022-12-06",
"2022-12-07",
"2022-12-08",
"2022-12-09",
"2022-12-10",
"2022-12-11",
"2022-12-12",
"2022-12-13",
"2022-12-14",
"2022-12-15",
"2022-12-16",
"2022-12-17",
"2022-12-18",
"2022-12-19",
"2022-12-20",
"2022-12-21"
],
crosshair: true,
},
yAxis: {
min: 0,
title: {
text: "",
},
},
tooltip: {
headerFormat:
'<span style="font-size:10px">{point.key}</span><table>',
pointFormat:
'<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}%</b></td></tr>',
footerFormat: "</table>",
shared: true,
useHTML: true,
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
},
},
series: [
{
name: “Data”,
data: [
[
"2022-09-21",
0
],
[
"2022-09-22",
0
],
[
"2022-09-23",
0
],
[
"2022-09-24",
0
],
[
"2022-09-25",
0
],
[
"2022-09-26",
0
],
[
"2022-09-27",
0
],
[
"2022-09-28",
0
],
[
"2022-09-29",
0
],
[
"2022-09-30",
0
],
[
"2022-10-01",
0
],
[
"2022-10-02",
0
],
[
"2022-10-03",
0
],
[
"2022-10-04",
0
],
[
"2022-10-05",
0
],
[
"2022-10-06",
0
],
[
"2022-10-07",
0
],
[
"2022-10-08",
0
],
[
"2022-10-09",
0
],
[
"2022-10-10",
0
],
[
"2022-10-11",
0
],
[
"2022-10-12",
0
],
[
"2022-10-13",
0
],
[
"2022-10-14",
0
],
[
"2022-10-15",
0
],
[
"2022-10-16",
0
],
[
"2022-10-17",
0
],
[
"2022-10-18",
0
],
[
"2022-10-19",
0
],
[
"2022-10-20",
0
],
[
"2022-10-21",
0
],
[
"2022-10-22",
0
],
[
"2022-10-23",
0
],
[
"2022-10-24",
0
],
[
"2022-10-25",
0
],
[
"2022-10-26",
0
],
[
"2022-10-27",
0
],
[
"2022-10-28",
0
],
[
"2022-10-29",
0
],
[
"2022-10-30",
0
],
[
"2022-10-31",
0
],
[
"2022-11-01",
0
],
[
"2022-11-02",
0
],
[
"2022-11-03",
0
],
[
"2022-11-04",
0
],
[
"2022-11-05",
0
],
[
"2022-11-06",
0
],
[
"2022-11-07",
0
],
[
"2022-11-08",
0
],
[
"2022-11-09",
0
],
[
"2022-11-10",
0
],
[
"2022-11-11",
0
],
[
"2022-11-12",
0
],
[
"2022-11-13",
0
],
[
"2022-11-14",
0
],
[
"2022-11-15",
0
],
[
"2022-11-16",
0
],
[
"2022-11-17",
0
],
[
"2022-11-18",
0
],
[
"2022-11-19",
0
],
[
"2022-11-20",
0
],
[
"2022-11-21",
0
],
[
"2022-11-22",
0
],
[
"2022-11-23",
0
],
[
"2022-11-24",
0
],
[
"2022-11-25",
0
],
[
"2022-11-26",
0
],
[
"2022-11-27",
0
],
[
"2022-11-28",
0
],
[
"2022-11-29",
0
],
[
"2022-11-30",
0
],
[
"2022-12-01",
0
],
[
"2022-12-02",
0
],
[
"2022-12-03",
0
],
[
"2022-12-04",
0
],
[
"2022-12-05",
0
],
[
"2022-12-06",
0
],
[
"2022-12-07",
0
],
[
"2022-12-08",
0
],
[
"2022-12-09",
0
],
[
"2022-12-10",
0
],
[
"2022-12-11",
0
],
[
"2022-12-12",
0
],
[
"2022-12-13",
0
],
[
"2022-12-14",
0
],
[
"2022-12-15",
45.22
],
[
"2022-12-16",
45.22
],
[
"2022-12-17",
45.22
],
[
"2022-12-18",
45.22
],
[
"2022-12-19",
45.22
],
[
"2022-12-20",
45.22
],
[
"2022-12-21",
45.22
]
],
color: "#5f76e8c7",
},
],
//resize: true,
credits: {
enabled: false,
},
};
Upvotes: 0
Views: 381
Answers (1)
ppotaczek
Reputation: 39079
Check the data-grouping feature from Highstock which can be useful in your case: https://www.highcharts.com/docs/stock/data-grouping
With basic Highcharts, you can try to use the labels.formatter function to build connected label text. For example:
xAxis: {
type: 'category',
tickInterval: 15,
labels: {
formatter: function() {
const tickInterval = this.axis.tickInterval;
if (!this.isFirst) {
return this.value + ' - ' + this.axis.names[this.pos - tickInterval];
}
return this.value;
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/8s6uwn5a/
API Reference: https://api.highcharts.com/highcharts/xAxis.labels.formatter
Upvotes: 1
Related Questions
- How to properly set datetime as x-axis value on Highcharts(React JS)
- React: How to show correct date and plot data as Months in Highcharts
- How to implement date selector to HighChart StockChart in reactjs (without jQuery)
- How to set the x axis of HighCharts to intake DateRange
- How to make highcharts with dynamic datetime range with monthly interval
- Add initial and final date to Range Selector Highstock
- Get dates highcharts onChange
- displaying dates on x axis with Highcharts.js
- Highcharts dates
- Date values as Y-axis in Highcharts