vue-chartjs sample2

import VueChartJS from 'vue-chartjs'
import ChartJSDatalabels from 'chartjs-plugin-datalabels'
import Chart from 'chart.js'


Chart.defaults.MyLine = Chart.defaults.line;
Chart.controllers.MyLine = Chart.controllers.line.extend({
   draw: function(ease) {
      Chart.controllers.line.prototype.draw.call(this, ease);

      if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
         var activePoint = this.chart.tooltip._active[0],
             ctx = this.chart.ctx,
             x = activePoint.tooltipPosition().x,
             topY = this.chart.scales['y-axis-0'].top,
             bottomY = this.chart.scales['y-axis-0'].bottom

         // draw line
         ctx.save();
         ctx.beginPath();
         ctx.moveTo(x, topY);
         ctx.lineTo(x, bottomY);
         ctx.lineWidth = 1;
         ctx.strokeStyle = 'rgba(0,119,204,.5)';
         ctx.stroke();
         ctx.restore();

      }
   }
});



export default({
  extends:VueChartJS.Bar,
  mixins:VueChartJS.mixins.reactiveData,
  data(){
    return{
      gradientRedBar: null,
      gradientYellowBar:null,
      gradientBlueBar:null
    }
  }
    ,
  mounted(){
    
    this.gradientRedBar = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
    this.gradientRedBar.addColorStop(0.25, 'rgba(255, 0,0,1)')
    this.gradientRedBar.addColorStop(1, 'rgba(255, 0, 0, 0.5)');

    this.gradientYellowBar = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
    this.gradientYellowBar.addColorStop(0.25, 'rgba(255,255,0,1)')
    this.gradientYellowBar.addColorStop(0.5, 'rgba(255,255, 0, 0.75)');
    this.gradientYellowBar.addColorStop(1, 'rgba(255,255, 0, 0.5)');

    this.gradientBlueBar = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
    this.gradientBlueBar.addColorStop(0.25, 'rgba(0,0,255,1)')
    this.gradientBlueBar.addColorStop(0.5, 'rgba(0,0,255,0.75)');
    this.gradientBlueBar.addColorStop(1, 'rgba(0,0,255,0.5)');

let datas={
  labels:["2014","2015","2016","2017","2018","2019","2020","2021"],
  datasets:[
    {label:"Alpha",data:[22,27,55,11,27,27,55,11],backgroundColor:this.gradientRedBar,stack:"sum",datalabels: {color:'#555'} },
    {label:"Beta",data:[11,19,22,33,11,19,22,33],backgroundColor:this.gradientBlueBar,stack:"sum"},
    {label:"Gama",data:[17,25,44,12,17,25,44,12],backgroundColor:this.gradientYellowBar,stack:"sum"},
    {label:"TOTAL",data:[50,72,121,56,50,72,121,56],type:'MyLine',backgroundColor:'rgba(0,119,204,.175)',borderWidth:3, pointRadius:3,stack:"",datalabels: {color:'#555',font:{weight:'bold',size:0}}},
    {label:"AVG",data:[43,43,43,43,43,43,43,43],type:'MyLine',backgroundColor:'rgba(22,9,120,.05)',borderColor:'rgba(244,50,49,.25)',borderWidth:3, pointRadius:3,stack:"",datalabels: {color:'#666',font:{size:'0',}}},

  ]
}

var options={
    responsive:true,
    tooltips:{ intersect:false},
    
    scales:{
      yAxes:[{gridLines:{display:true,borderDash:[10],color:'rgba(0,0,255,.25)',},ticks: {
        beginAtZero: true
     }}],
      xAxes:[{gridLines:{display:true,borderDash:[10],color:'rgba(255,0,0,.25)',}}],
    },
    
    plugins:
    {
        datalabels: {
            backgroundColor: function () {return 'rgba(244,50,49,.725)';},
            borderRadius:function(){ return '15px' },
            formatter: (value) => { return value; },
            color: '#555'
        },                            
    },
}

    this.addPlugin(ChartJSDatalabels)
    this.renderChart(datas,options)
  }
})