How to add gradient background to Line Chart [vue-chart.js]

Question

how can I add a gradient backgroundColor to a line chart, I pass the data as props.

this is my LineChart.vue component:

import { Line, mixins } from 'vue-chartjs'
  const { reactiveProp } = mixins

  export default {
    extends: Line,
    mixins: [reactiveProp],
    data: () => ({
      gradient: null,
      options: {
        layout: {
          padding: {
            bottom: -20,
            left: -20,
          }
        },
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              min: 0,
              display: false,
            },
            gridLines: {
              drawBorder: false,
              showBorder: false,
              display: false,
            },
          }],
          xAxes: [{
            gridLines: {
              drawBorder: false,
              showBorder: false,
              display: false,
            },
            ticks: {
              display: false
            }
          }]
        }
      }
    }),
    mounted () {
      // this.chartData is created in the mixin.
      // If you want to pass options please create a local options object.

      this.renderChart(this.chartData, this.options)
    }
  }

and this is the chartdata initialization in Home.vue:

    this.chartdata3 = {
      labels: ['bla', 'bla', 'bla', 'bla'],
      datasets: [
        {
          backgroundColor: "rgba(42, 115, 237, 0.9)",
          data: ['200', '400', '100', '700'],
        }
      ]
    };

How can I have a gradient instead of solid color in the background of the line chart?

Answer 1

You should be able to add ref="chart" to your canvas . After that you can declare the new variable that will store the background color.

Like this:

var gradientFill = this.$refs.chart.createLinearGradient(500, 0, 100, 0);
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0.6)");
gradientFill.addColorStop(1, "rgba(244, 144, 128, 0.6)");

Then you should be able to use backgroundColor: gradientFill in your chart options.

Please put this code in created or mounted methods in Vue lifecycle as needed to make sure it renders properly when component displays.

That should be it.

Yo can try and play with it here: https://codepen.io/plavookac/pen/RKjNEV

I hope this helps.

Let me know if you have any questions.