Dimitriy
Dimitriy

Reputation: 135

Highcharts, datetime, xAxis label. How to show all dates on x axis, not only even dates?

I'm new with Highcharts and stuck with a question. I need to display all dates on x axis, but by default, I'm supposing, only even dates are displaying. How can I display all dates? enter image description here

Here my code:

const options: Options = {
        chart: {
            type: 'column',
        },
        title: {
            text: '',
        },
        xAxis: {
            crosshair: false,
            type: 'datetime',
            title: {
                text: 'Days',
            },
            labels: {
                format: LABEL_FORMAT[period],
                rotation: 90,
                align: 'left',
            },
        },
        legend: {
            enabled: true,
        },
        credits: {
            enabled: false,
        },
        yAxis: {
            title: {
                text: 'Values',
            },
        },
        series: [
            {
                name: 'test',
                type: 'column',
                data: [
                    [1651363200000, 10],
                    [1651449600000, 15],
                    [1651536000000, 5],
                    ...
                ],
            },
            {
                name: 'test 2',
                type: 'column',
                data: [
                    [1651363200000, 10],
                    [1651449600000, 20],
                    [1651536000000, 30],
                    ...
                ],
            },
        ],
       },
    };

This chart is not only used for to display day, but also for months and years. Please, answer my question

Upvotes: 2

Views: 1590

Answers (1)

magdalena
magdalena

Reputation: 3695

Use the xAxis.tickInterval option. In this case:

  xAxis: {
    tickInterval: 24 * 3600 * 1000,
    type: 'datetime',
    labels: {
      format: '{value:%Y-%m-%d}',
      rotation: 90,
      align: 'left'
    },
  }

Demo: https://jsfiddle.net/BlackLabel/t0Lohusx/

API Reference: https://api.highcharts.com/highcharts/xAxis.tickInterval

Upvotes: 2

Related Questions