[Chartjs]-How to create multiple chart on one component vue

by

5👍

✅

You can use props.

NOTE – For reactivity problems you can see https://vue-chartjs.org/guide/#updating-charts

JS

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins


export default {
  extends: Line,
  mixins: [reactiveProp],
  props: {
    labels: Array,
    datasets: Object
  },
  mounted () {
    this.renderChart({
      labels: this.labels,
      datasets: this.datasets,
    }, {responsive: true, maintainAspectRatio: false})
  }
}

Component

        <template>
  <div class="Chart">
    <h2>Linechart 1</h2>
    <line-example :labels="labels" :datasets="datasets"></line-example>
    <h2>Linechart 2</h2>
    <line-example :labels="labels2" :datasets="datasets2"></line-example>
  </div>
</template>

<script>
import LineExample from './LineChart.js'
export default {
  name: 'tes',
  components: {
    LineExample
  },
  data () {
    return {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      labels2: ['Foo', 'Bar'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#FC2525',
          data: [40, 39, 10, 40, 39, 80, 40]
        },{
          label: 'Data Two',
          backgroundColor: '#05CBE1',
          data: [60, 55, 32, 10, 2, 12, 53]
        }
      ],
      datasets2: [
        {
          label: 'Data One',
          backgroundColor: '#FC2525',
          data: [1, 2]
        },{
          label: 'Data Two',
          backgroundColor: '#05CBE1',
          data: [3, 4]
        }
      ]
    }
  }
}
</script>

Leave a comment