Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

188
Views
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'
                        }
                    }
                },
}
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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/

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!