CODEWITHSUNDEEP
chart.jschart.js2
Vsevolod Fedorov
Vsevolod Fedorov

Reputation: 521

chart.js - How draw x and y axes lines on the left and bottom

I use chart.js v2 library to draw a chart. I tried to set a zero line but it's not working. I need to draw two lines like on the screenshot below. Is it possible to draw with some cinfiguration options? enter image description here

var options = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{
          x: 20,
          y: 1
        },
        {
          x: 21,
          y: 1.1
        },
        {
          x: 23,
          y: 1.4
        },
      ],
    }]
  },
  options: {
    legend: false,
    scales: {
      yAxes: [{
        ticks: {
          min: 1,
          max: 2,
          display: false,
        },
        gridLines: {
          color: 'transparent',
          display: true,
          zeroLineColor: 'red'
        },
      }],
      xAxes: [{
        ticks: {
          min: 1,
          max: 99,
        },
        gridLines: {
          color: 'transparent',
          display: true,
          zeroLineColor: 'red'
        },
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);


<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Here is a fiddle with code: https://jsfiddle.net/c4wotrx1/4/

Upvotes: 0

Views: 113

Answers (2)

0stone0
0stone0

Reputation: 43944

You'll need to enable the gridLines on both xAxes and yAxes, but disable the drawOnchartArea:

xAxes: [{
        ticks: {
          min: 1,
          max: 99,
        },
        gridLines: {
          color: 'red',
          display: true,
          drawBorder: true,
          drawOnChartArea: false
        },
      }],
      yAxes: [{
        gridLines: {
           color: 'red',
            display: true,
            drawBorder: true,
            drawOnChartArea: false
        }
     }]

enter image description here

Upvotes: 1

Tjaym
Tjaym

Reputation: 87

try below, you need to keep the lines but hide them in the chart area.

This you can do by drawOnChartArea: false, see this documentation

gridLines: {
        drawBorder:true,
      drawOnChartArea: false,
      color: 'red',
      display: true,
      zeroLineColor: 'red'
    },

hope this helps.

Upvotes: 1

Related Questions