Chartjs-Chart.js draw custom grid lines

by

1👍

In vue-chartjs, the second argument of renderChart() is the options config for the chart, which can contain scales.xAxes and scales.yAxes properties to set the color of the axes (i.e., the grid):

this.renderChart( /* data */ , {
  scales: {
    xAxes: [{
      display: true,
      gridLines: {
        display: true,
        color: '#eee'
      },
    }],
    yAxes: [{
      display: true,
      gridLines: {
        display: true,
        color: '#eee'
      },
    }]
  }
})

Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ],
    }, {
      responsive: true, maintainAspectRatio: false,
      scales: {
        xAxes: [{
          display: true,
          gridLines: {
            display: true,
            color: '#444'
          },
        }],
        yAxes: [{
          display: true,
          gridLines: {
            display: true,
            color: '#444'
          },
        }]
      }
    })
  }
  
})

new Vue({
  el: '.app',
})
.app {
  background-image: radial-gradient(#2e3f61, #131b29);
}
<script src="https://unpkg.com/vue@2.5.16"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.0.1-rc2/dist/vue-chartjs.js"></script>
<div class="app">
  <line-chart></line-chart>
</div>

1👍

For future readers, I was unable to create custom gridlines using chart.js. The C3.js package contains far more customisation options for gridlines and gives the option of providing custom/user-defined grid lines, described here.

C3.js available here.

0👍

Look at the ticks dictionary which you define inside scales > xAxes/yAxes.

The options autoskip: false and source: ‘data’ should work.

Leave a comment