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>
π€tony19
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.
π€MJ_Wales
0π
Look at the ticks dictionary which you define inside scales > xAxes/yAxes.
The options autoskip: false and source: βdataβ should work.
π€sureshvv
- [Vuejs]-Firestore Promises Query Collection in For Loop (Nuxt.js)
- [Vuejs]-VueJS Axios JSON slice/filter is not a function
Source:stackexchange.com