Chart.js gradient

Vue Nuxt Chartjs

gradient

내가 참여한 프로젝트에서는 라인 컴포넌트에 데이터만 넘겨주고, 실제 라인 컴포넌트에서는 데이터를 받아 그래프만 그려주는 형식이었다.

get lineChart() {
  let datasets = [  
    {  
      label: '헤이비트',
      backgroundColor: '#ffa000',
      borderColor: '#ffa000',
      borderWidth: 2,
      pointRadius: 0,
      pointHoverBackgroundColor: '#ffa000',  
      pointHoverBorderColor: '#ffa000',  
      fill: true,  // required!
      data: [1, 4, 2, 6]
    },  
    {  
      label: 's&p500',  
      backgroundColor: '#ddd',  
      borderColor: '#ddd',  
      borderWidth: 2,  
      pointRadius: 0,  
      pointHoverBackgroundColor: '#ddd',  
      pointHoverBorderColor: '#ddd',  
      fill: false,  // No gradient
      data: this.performance.index_sp  
    }  
  ]
}

mounted() {  
  let canvas = document.getElementById('line-chart') as HTMLCanvasElement  
  let ctx: any = canvas.getContext('2d')  
  this.gradient = ctx.createLinearGradient(0, 0, 0, 450)
  this.gradient.addColorStop(0, '#FFE8C3')   
  this.gradient.addColorStop(1, '#fff')

  this.chartData.datasets[0].backgroundColor = this.gradient
  
  this.renderChart(this.chartData, this.options)  
  }