I am trying to do a forecast chart using highcharts but all my dates that say December in my second series are also showing up a November dates. Not sure why.
Highcharts.chart("container", {
chart: { backgroundColor: "#fbfcf8", type: "line", zoomType: "x" },
title: { text: "", align: "center" },
accessibility: { enabled: false },
credits: { enabled: false },
legend: { enabled: true, itemStyle: { color: "#000" } },
rangeSelector: { enabled: false },
navigator: { enabled: false },
scrollbar: { enabled: false },
xAxis: {
tickInterval: 2,
categories: [
"Nov 3, 2024",
"Nov 4, 2024",
"Nov 5, 2024",
"Nov 6, 2024",
"Nov 7, 2024",
"Nov 8, 2024",
"Nov 9, 2024",
"Nov 10, 2024",
"Nov 11, 2024",
"Nov 12, 2024",
"Nov 13, 2024",
"Nov 14, 2024",
"Nov 15, 2024",
"Nov 16, 2024",
"Nov 17, 2024",
"Nov 18, 2024",
"Nov 19, 2024",
"Nov 20, 2024",
"Nov 21, 2024",
"Nov 22, 2024",
"Nov 23, 2024",
"Nov 24, 2024",
"Nov 25, 2024",
"Nov 26, 2024",
"Nov 27, 2024",
"Nov 28, 2024",
"Nov 29, 2024",
"Nov 30, 2024",
"Dec 1, 2024",
"Dec 2, 2024",
"Dec 3, 2024",
"Dec 4, 2024",
"Dec 5, 2024",
"Dec 6, 2024",
"Dec 7, 2024",
"Dec 8, 2024",
"Dec 9, 2024",
"Dec 10, 2024",
"Dec 11, 2024",
"Dec 12, 2024",
"Dec 13, 2024",
"Dec 14, 2024",
"Dec 15, 2024",
"Dec 16, 2024",
"Dec 17, 2024",
"Dec 18, 2024",
],
labels: { style: { color: "#000" } },
lineColor: "#000",
lineWidth: 3,
},
yAxis: {
gridLineColor: "#fbfcf8",
lineColor: "#000",
lineWidth: 3,
labels: { style: { color: "#000" } },
title: { text: "" },
opposite: false,
},
tooltip: {
backgroundColor: "#fbfcf8",
style: { color: "#000" },
shared: true,
useHTML: true,
},
plotOptions: {
series: {
stacking: "normal",
marker: { enabled: false, states: { hover: { enabled: true } } },
},
},
series: [
{
name: "Change In Subscribers",
data: [
{ name: "Nov 4, 2024", y: 20810 },
{ name: "Nov 5, 2024", y: 22300 },
{ name: "Nov 11, 2024", y: 16110 },
{ name: "Nov 20, 2024", y: 3439 },
{ name: "Nov 13, 2024", y: 15320 },
{ name: "Nov 8, 2024", y: 0 },
{ name: "Nov 12, 2024", y: 5300 },
{ name: "Nov 10, 2024", y: 5100 },
{ name: "Nov 15, 2024", y: 1100 },
{ name: "Nov 3, 2024", y: 5110 },
{ name: "Nov 22, 2024", y: 0 },
{ name: "Nov 23, 2024", y: 310 },
{ name: "Nov 26, 2024", y: 45200 },
{ name: "Nov 19, 2024", y: 3260 },
{ name: "Nov 21, 2024", y: 29300 },
{ name: "Nov 28, 2024", y: 9530 },
{ name: "Dec 2, 2024", y: 28410 },
{ name: "Dec 1, 2024", y: 14700 },
{ name: "Nov 18, 2024", y: 7350 },
{ name: "Nov 7, 2024", y: 14410 },
{ name: "Nov 29, 2024", y: 0 },
{ name: "Nov 30, 2024", y: 3301 },
{ name: "Nov 25, 2024", y: 18540 },
{ name: "Nov 9, 2024", y: 11207 },
{ name: "Nov 16, 2024", y: 0 },
{ name: "Nov 6, 2024", y: 16220 },
{ name: "Nov 17, 2024", y: 17710 },
{ name: "Nov 14, 2024", y: 7420 },
{ name: "Nov 27, 2024", y: 16110 },
{ name: "Nov 24, 2024", y: 5510 },
{ name: "Dec 3, 2024", y: 0 },
],
color: "#6B8E23",
yAxis: 0,
},
{
name: "Forecast",
data: [
{ name: "Dec 4, 2024", y: 11534.55 },
{ name: "Dec 5, 2024", y: 11562.05 },
{ name: "Dec 6, 2024", y: 11589.55 },
{ name: "Dec 7, 2024", y: 11617.06 },
{ name: "Dec 8, 2024", y: 11644.56 },
{ name: "Dec 9, 2024", y: 11672.06 },
{ name: "Dec 10, 2024", y: 11699.56 },
{ name: "Dec 11, 2024", y: 11727.07 },
{ name: "Dec 12, 2024", y: 11754.57 },
{ name: "Dec 13, 2024", y: 11782.07 },
{ name: "Dec 14, 2024", y: 11809.58 },
{ name: "Dec 15, 2024", y: 11837.08 },
{ name: "Dec 16, 2024", y: 11864.58 },
{ name: "Dec 17, 2024", y: 11892.08 },
{ name: "Dec 18, 2024", y: 11919.59 },
],
color: "red",
dashStyle: "LongDash",
lineWidth: 2,
},
],
})<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>Why are my December dates showing up as November?
You are using the wrong type of xAxis - you should use datetime type instead of category, please see the API reference. With category xAxis, points are treated as discrete points, not as timestamps, and it seems you need the latter.
xAxis: {
tickInterval: 24 * 3600 * 1000 * 2,
type: 'datetime',
min: Date.UTC(2024, 10, 3), // optional
max: Date.UTC(2024, 11, 18), // optional
labels: { style: { color: "#000" } },
lineColor: "#000",
lineWidth: 3,
},
Also, keep in mind that with the datetime xAxis type, your data needs to be sorted in ascending order for it to work properly.
Demo: https://jsfiddle.net/BlackLabel/xon4evp8/
I hope you will find it useful.