javascript - chart.js control space betweensize of gridlines - Stack Overflow

admin管理员组

文章数量:1356003

I have created a line chart in chart.js that plots data from financial markets.

How can I control the width of the gridlines from the x axis?

The data is time based and when the chart starts the space between the gridlines is too big.

As the data is added the chart condenses the space automatically.

I would like to control the spacing to a uniform amount that I can set from the start.

Any help much appreciated.

I have created a line chart in chart.js that plots data from financial markets.

How can I control the width of the gridlines from the x axis?

The data is time based and when the chart starts the space between the gridlines is too big.

As the data is added the chart condenses the space automatically.

I would like to control the spacing to a uniform amount that I can set from the start.

Any help much appreciated.

• javascript
• chart.js

Share Improve this question Follow edited May 4, 2018 at 10:00 k11k2 2,04422 gold badges2424 silver badges3737 bronze badges asked May 3, 2018 at 15:01 kmm2908kmm2908 2111 gold badge11 silver badge22 bronze badges 5

• 1 add your code also – Vikasdeep Singh Commented May 3, 2018 at 15:08
• How would the code help? It's a 2000 line script. – kmm2908 Commented May 4, 2018 at 6:45
• I haven't yet needed to adjust the gridLines except for hiding the horizontal ones. With that said I found this (chartjs/docs/latest/axes/…) within the docs, try play around with the borderDash property - I think this will help. – Koshux Commented May 4, 2018 at 16:55
• Thanks @Koshux, will try that next – kmm2908 Commented May 5, 2018 at 9:47
• @kmm2908 Hey did you solve this, if so how? I am also having the same problem. – Jereme Commented Jul 2, 2020 at 16:25

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You can set a maximum number of vertical grid lines (for x axis) :

scales: {
    xAxes: [{
        ticks: {
            maxTicksLimit: 20,
        },
    }]
},

Might not be the best solution but by setting a fix hight or width you can control the max-space between the gridLines

<canvas id="myChart" width="1200px"></canvas>

I've spent a few days trying to solve this exact problem. This video led me to the ultimate solution to this: https://www.youtube./watch?v=XUAP3szj_u8

本文标签： javascriptchartjs control space betweensize of gridlinesStack Overflow