CODEWITHSUNDEEP
javascriptjqueryhighcharts
Amara
Amara

Reputation: 351

How to extend X axis datetime in Highchart

Hi I am new to HighChart, I was trying to extend the x-axis of my graph which is a datatime showing date and month. enter image description here

The issue here is I am getting dates on intervals of 1 day because of tickInterval: 24 * 3600 * 1000. My last entry of data point plotted on the graph is of 3rd Feb but the tickInterval skipping the date how can Is this possible to display +1 day before the data? In short how can I show 4th February here?

My second concern is about the tickInterval of one day which is 86400000 milliseconds. How can I show days without skipping or giving interval? Like Showing 1Feb, 2Feb, 3Feb 4Feb without skipping any day?

Below is my code for the following chart.

Highcharts.chart('container', {
                chart: {
                    type: 'spline'
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        minute: '%H:%M',
                        hour: '%H:%M',
                        day: '%e. %b',
                        week: '%e. %b',
                        month: '%b \'%y',
                        year: '%Y'

                    },
                    tickInterval: 24 * 3600 * 1000,
                    title: {
                        text: 'By Date'
                    },
                    labels: {
                        style: {
                            color: 'black',
                            fontSize: '11px'
                        }
                    }
                },
}

Upvotes: 0

Views: 464

Answers (1)

Sebastian Hajdus
Sebastian Hajdus

Reputation: 1560

For showing the last tick you can use xAxis.endOnTick, it will force to end on this one.

    xAxis: {
      endOnTick: true,
      showLastLabel: true,
      startOnTick: true
    },

To set the tick you have the possibility to use xAxis.tickPositioner or xAxis.tickPositions to define an array with every tick.

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

Upvotes: 2

Related Questions