How to set months of the last year in highcharts?

Question

I need chart which ends in the current month (July). Ticks should be set each 3 months. But now my chart requires pointStart, which limits time from october 2022 to july 2023 (date should be limited only by july 2023). Also not all of my points are displayed (chart misses 4 last values).

https://jsfiddle.net/njmb7uoL/

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            month: '%b',
            year: '%b'
        },
        max: Date.UTC(new Date().getFullYear(), new Date().getMonth(), 1),
    },
    plotOptions: {
        series: {
            pointStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1).setMonth(new Date().getMonth() - 9),
            pointInterval: 3,
            pointIntervalUnit: 'month',
        },
    },
    series: [{
        name: 'Moose',
        data:
            [
                38000,
                37300,
                37892,
                38564,
                68767,
                73464,
                83748,
                34343,
            ]
    }, {
        name: 'Deer',
        data:
            [
                22534,
                23599,
                24533,
                25195,
                45454,
                74657,
                32432,
                34343,
            ],
          
    }]
});

what I want to get:

Did not understand your question. Your expected picture is same as one provided in the fiddle. — CodeThing, Jul 10 '23 at 11:49
@CodeThing last values (68767, 73464, 83748, 34343 & 45454, 74657, 32432, 34343) are skipped by lib in my example. Only 4 of them are displayed. I need to show all — Kvasimodo, Jul 10 '23 at 12:14
I don't clearly understand your question either. So, where the first and the last point should be shown? First of all the tick interval and point interval is not the same thing, that's why all point are not displayed; Here is the example demo with fixed intervals: https://jsfiddle.net/BlackLabel/zvrg1e4q/ — magdalena, Jul 10 '23 at 12:22
@CodeThing thank you. You can see that chart in your link starts from Oct and doesn't reach July. I need vice versa. Chart should end to current month but start should be dynamic, depend on data point count. For example, if I have 7 points, chart should end on July 2023 but starts on Dec 2022 — Kvasimodo, Jul 10 '23 at 12:43

score 0 · Accepted Answer · answered Jul 10 '23 at 14:48

The following example should basically do it: The end of the interval is the current month, which is July 2023. The start of the interval is determined by the length of the data (first column), such that e.g. with the provided example the begin is at the end of November 2022.

let srs = [
  [
    38000,
    37300,
    37892,
    38564,
    68767,
    73464,
    83748,
    34343,
  ],
  [
    22534,
    23599,
    24533,
    25195,
    45454,
    74657,
    32432,
    34343,
  ]
];


let chart = Highcharts.chart('container', {
  chart: {
    type: 'areaspline'
  },
  xAxis: {
    tickInterval: 90 * 24 * 3600 * 1000, // 3 months
    //startOnTick: true,
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%b',
      year: '%b'
    },
    max: Date.UTC(new Date().getFullYear(), new Date().getMonth(), 3),
  },
  plotOptions: {
    series: {
      pointStart: new Date(new Date().getFullYear(), new Date().getMonth(), 1).setMonth(new Date().getMonth() - srs[0].length + 1),
      pointInterval: 1,
      pointIntervalUnit: 'month',
    },
  },
  series: [{
    name: 'Moose',
    data: srs[0]
  }, {
    name: 'Deer',
    data: srs[1],
  }]
});

#container {
    height: 400px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        This demo shows a smoothed area chart with an x-axis plot band
        highlighting an area of interest at the last two points. Plot bands
        and plot lines are commonly used to draw attention to certain areas or
        thresholds.
    </p>
</figure>

How to set months of the last year in highcharts?

1 Answers1