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

this is my LineChart.vue ponent:

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?

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

this is my LineChart.vue ponent:

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?

• javascript
• vue.js
• charts
• chart.js

Share Improve this question Follow asked Dec 11, 2019 at 22:05 Anas LatiqueAnas Latique 40811 gold badge77 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 ponent 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.