[Fixed] X axis should have a space in Line chart- Chart JS

Issue

I was trying to create a line chart and it is working as expected, except for one small design improvement.

The line chart created starts by touching the first point from the Y-axis but I would like it to have a bit of a space before it.

Chart I am generating:

enter image description here

Chart I want to generate:

enter image description here

I was unable to find the exact keyword to search it up within the documents.
Here attached is the code I have been working with:
Stack Blitz

Solution

You can define xAxes.offset: true and it should work as expected.

xAxes: [
    {
      offset: true,
      ... 
    }
  ]

offset: If true, extra space is added to both edges and the axis is scaled to fit into the chart area.

Please take a look at your amended StackBlitz.

Leave a Reply

(*) Required, Your email will not be published