CODEWITHSUNDEEP
javascriptchartslinechartchartist.js
Kevin Garrity
Kevin Garrity

Reputation: 23

how to adjust the spacing of grid lines in chartist.js?

I am having trouble with chartist.js. I want to adjust the spacing between y-axis gridlines by 40px.(Now 36px) I tried to find some examples already, but I couldn't.

.ct-grids line {
  stroke: #fff;
  opacity: .05;
  stroke-dasharray: none;
}

This is my current styling for grids.

var data = {
  labels: ['JAN 1', 'JAN 18', 'FEB 14', 'MAR 9', 'APR 22', 'May 2'],
  series: [
  [40.8, 46.5, 48.8, 56.9, 68.7, 72.7],
  [12.8, 13.7, 13.9, 14.8, 15.3, 15.6],
  [5.2, 3.8, 4.2, 5, 3.9, 4.3],
  [1.2, 1.8, 1.7, 2.1, 1.8, 1.9]
  ]
};

var options = {
   showPoint: false,
   lineSmooth: false,
   axisX: {
        showGrid: false,
        showLabel: false
    },
    axisY: {
        offset: 0,
        showGrid: true,
        showLabel: false
    }
};

var chart = new Chartist.Line('.ct-chart', data, options);

Please let me know if you know. Thanks.

Upvotes: 2

Views: 2746

Answers (2)

James
James

Reputation: 86

Please change the axisY option like this.

options = {
    axisY: {
        offset: 0,
        scaleMinSpace: 40
        showGrid: true,
        showLabel: false
    }
}

For more information, https://gionkunz.github.io/chartist-js/api-documentation.html.

Upvotes: 5

Jad S
Jad S

Reputation: 3015

Using the scaleMinSpace on the axisY option worked for me

options = {
    axisY: {
         scaleMinSpace: 40
    }
}

Upvotes: 1

Related Questions