CODEWITHSUNDEEP
javascripthighcharts
Tales
Tales

Reputation: 303

How to show data between two date range in spline chart of Highcharts?

I am using Highchart to show the data on spline chart. Here I have two date range from 2021-09-12T18:30:00.000Z to 2021-09-18T18:29:59.999Z which will change according to date range selection.

Issue: The spline chart x-axis range tick starts with the date 11 and my graph starts from second tick that is 12. I want the x-axis tick should start from 12 and end with 18 like the above date range and the data given below. I am adding JS fiddle link for the reference.Spline Chart Thank you.

[
  {
    name: 'Allowed Request',
    data: [
      [Date.UTC(2021,8,12), 2202],
      [Date.UTC(2021,8,13), 1234],
      [Date.UTC(2021,8,14), 1245],
      [Date.UTC(2021,8,15), 3000],
      [Date.UTC(2021,8,16), 2345],
      [Date.UTC(2021,8,17), 2505],
      [Date.UTC(2021,8,18), 4933],
    ]
  },
  {
    name: 'Denied Request',
    data: [
      [Date.UTC(2021,8,12), 1234],
      [Date.UTC(2021,8,13), 2202],
      [Date.UTC(2021,8,14), 3000],
      [Date.UTC(2021,8,15), 3000],
      [Date.UTC(2021,8,16), 2345],
      [Date.UTC(2021,8,17), 3000],
      [Date.UTC(2021,8,18), 2505],
    ]
  }
]

Upvotes: 0

Views: 590

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

In your config, there is a startOnTick option which is set as true. Change it to false solve the issue.

However, if you want to keep this space which is added by startOnTick option, you can leave it as a true, but you need to add showFirstLabel property set a false.

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

Upvotes: 2

Related Questions