CODEWITHSUNDEEP
javascriptvue.jschart.js
Arnas Pecelis
Arnas Pecelis

Reputation: 149

chart.js draw custom grid lines

I'm looking for option to draw custom grid instead of using the default one. The result I want to have is this one. enter image description here

At first I tried to extend the chart plugin by accessing its functions and changing contents of grid lines but couldn't do anything I want. Later I found this plugin and thought that was my solution but it were not neither. Also I found this afterFit event with callback on offsets and tried to manipulate it but also nothing. Btw I'm using chart.js for vue.js and of course with vue.js. Those grid lines must be constant and not move or change it place. I'm starting to think there are no option to solve the problem with chart.js

Upvotes: 0

Views: 2148

Answers (3)

sureshvv
sureshvv

Reputation: 4412

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

The options autoskip: false and source: 'data' should work.

Upvotes: 0

MJ_Wales
MJ_Wales

Reputation: 893

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.

Upvotes: 1

tony19
tony19

Reputation: 138216

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/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-chartjs.js"></script>
<div class="app">
  <line-chart></line-chart>
</div>

Upvotes: 1

Related Questions