I'm currently struggling to implement a linear gradient background on my Vue-chart.js line chart. Despite searching high and low, the documentation and examples available are not proving to be helpful.
After importing the Line component from vue-chartjs, I have set up a template as shown below:
<template>
<Line
:chartData="chartData"
:chartOptions="chartOptions"
:chartId="chartId"
:width="width"
:height="height"
:cssClasses="cssClasses"
:styles="styles"
:plugins="plugins"
/>
</template>
The script section includes the following code:
<script>
import { Line } from 'vue-chartjs'
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
LineElement,
CategoryScale,
LinearScale,
PointElement,
Plugin,
Filler,
BorderRadius
} from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, CategoryScale, PointElement, Filler)
export default {
name: 'BarChart',
components: { Line },
props: {
chartId: {
type: String,
default: 'line-chart'
},
width: {
type: Number,
default: 400
},
height: {
type: Number,
default: 160
},
cssClasses: {
default: '',
type: String
},
styles: {
type: Object,
default: () => {}
},
plugins: {
type: Array,
default: () => []
}
},
mounted () {
const canvas = document.getElementById('line-chart').getContext('2d');
const gradient = canvas.createLinearGradient(0,0,0,160);
gradient.addColorStop(0, 'green');
gradient.addColorStop(.5, 'cyan');
gradient.addColorStop(1, 'green');
this.gradient = gradient;
console.log(this.gradient);
},
data() {
return {
chartData: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
borderColor: '#FC2525',
pointBackgroundColor: 'white',
borderWidth: 1,
radius: 0,
fill: true,
pointBorderColor: 'white',
backgroundColor: this.gradient,
tension: 0.25,
data: [40, 39, 10, 40, 39, 80, 40]
},{
label: 'Data Two',
borderColor: '#05CBE1',
pointBackgroundColor: 'white',
pointBorderColor: 'white',
borderWidth: 1,
radius: 0,
fill: true,
backgroundColor: this.gradient,
tension: 0.25,
data: [60, 55, 32, 10, 2, 12, 53]
}
]
},
chartOptions: {
responsive: true,
plugins: {
legend: {
display: false
}
}
}
}
},
}
</script>
Despite all these efforts, the chart continues to display the default grey background instead of the desired gradient background.
If anyone has any insights or solutions, I would greatly appreciate the help.