JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<div id="app">
  <chart></chart>
</div>

CSS

div {
   width: 400px;
   height: 400px;
}

JavaScript

const chartComponent = {
  data() {
      return {
        //myChart: undefined, // don't add chart here -> reactivity could be a problem
        getAnalyticList: [{
          chartNames: [
            'Red',
            'Yellow',
            'Blue'
          ],
          chartData: [10, 20, 30]
        },
        {
          chartNames: [
            'Red',
            'Yellow',
            'Blue'
          ],
          chartData: [40, 10, 20]
        }
        ],
        rowIndex: 0
      }
    },
    template: `
    <div>
  	<canvas id="myChart" width="200px" height="200px"></canvas>
    <button @click="incRow">next</button>
    {{rowIndex}}
    </div>
  `,
    methods: {
      startChart: function() {
        var ctx = document.getElementById("myChart");
        var myDoughnut = this.myChart =  new Chart(ctx, {
          type: 'doughnut',
          data: {
            labels: this.getAnalyticList[this.rowIndex].chartNames,
            datasets: [{
              data: this.getAnalyticList[this.rowIndex].chartData,
              backgroundColor: [
                'rgba(255, 99, 132, 0.6)',
                'rgba(54, 162, 235, 0.6)',
                'rgba(255, 206, 86, 0.6)',
                'rgba(75, 192, 192, 0.6)',
                'rgba(153, 102, 255, 0.6)',
                'red',
                'yellow',
                'blue',
                'green',
                'orange',
                'teal',
                'violet',
                'pink',
                'purple'
              ]
            }]
          },
          options: {
            responsive: true,
            defaultFontColor: '#ffffff',
						
          }
        })
      },
      incRow () {
      	if (this.rowIndex < this.getAnalyticList.length - 1) {
        	this.rowIndex++;
        }
        else {
        	this.rowIndex = 0;
        }
        this.changeData()
      },
      changeData () {
      	this.myChart.data.datasets[0].data =
       ...