vue-chartjs에서 자동 색상 할당

이게 뭐야?

설치

$ npm i google-palette

사용법

<script>
import { Doughnut } from 'vue-chartjs'
import * as palette from 'google-palette'

export default {
  extends: Doughnut,
  data() {
    return {
      languages: ['Vue.js', 'C', 'C++', 'Python'],
      chartStatus: [40, 30, 20, 10]
    }
  },
  mounted: function() {
    this.renderChart(
      {
        labels: this.languages,
        datasets: [
          {
            backgroundColor: palette('mpn65', this.chartStatus.length).map(
              function(hex) {
                return '#' + hex
              }
            ),
            data: this.chartStatus
          }
        ]
      },
      { responsive: true, maintainAspectRatio: false }
    )
  }
}
</script>

<template>
  <div>
    <chart-graph />
  </div>
</template>

<script>
import Vue from 'vue'
import Chart from '~/components/Chart'

export default {
  components: {
    Chart
  }
}

Vue.component('chart-graph', Chart)
</script>

브라우저