Vue-Chartjs chart options - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Configuration

Description

Vue-Chartjs chart options

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>vue-chartjs v3</title> 
   </head> 
   <body translate="no"> 
      <div class="app">
          {{ message }} //from  w w w . j a v  a 2s. c o  m
         <line-chart></line-chart> 
      </div> 
      <script src="https://unpkg.com/vue"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script> 
      <script src="https://unpkg.com/vue-chartjs@3.0.1-rc2/dist/vue-chartjs.js"></script> 
      <script>
      Chart.pluginService.register({
 beforeRender: function(chart) {
  if (chart.config.options.showAllTooltips) {
   chart.pluginTooltips = [];
   chart.config.data.datasets.forEach(function(dataset, i) {
    chart.getDatasetMeta(i).data.forEach(function(sector, j) {
     chart.pluginTooltips.push(new Chart.Tooltip({
      _chart: chart.chart,
      _chartInstance: chart,
      _data: chart.data,
      _options: chart.options.tooltips,
      _active: [sector]
     }, chart));
    });
   }); // turn off normal tooltips
   chart.options.tooltips.enabled = false;
  }
 },
 afterDraw: function(chart, easing) {
  if (chart.config.options.showAllTooltips) { 
   if (!chart.allTooltipsOnce) {
    if (easing !== 1) return;
    chart.allTooltipsOnce = true;
   }
   chart.options.tooltips.enabled = true;
   Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
    tooltip.initialize();
    tooltip.update(); 
    tooltip.pivot();
    tooltip.transition(easing).draw();
   });
   chart.options.tooltips.enabled = false;
  }
 }
});
Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    }, {
      responsive: true,
      maintainAspectRatio: false,
      showAllTooltips: true,
      scales: {
            yAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                  display: false
                }
            }],
            xAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                  display: false
                }
            }]
       },
    })
  }
})
var vm = new Vue({
  el: '.app',
  data: {
    message: 'Hello World'
  }
})
      </script>  
   </body>
</html>

Related Tutorials