i want to create multiple chart from chart.js in one .vue ponent and one .js file, how i can create it?

so far what i try is creating another .js file for each chart.

here my code

LineChart.js file

import {Line} from 'vue-chartjs'

export default {
  extends: Line,
  mounted () {

    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      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]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})

  }
}

Step2.vue ponent

<template>
  <div class="Chart">
    <h2>Linechart</h2>
    <line-example></line-example>
  </div>
</template>

<script>
import LineExample from './LineChart.js'
export default {
  name: 'tes',
  ponents: {
    LineExample
  }
}
</script>

this code is for one chart, if i want to add more chart then i have to create another .js file.

i want to create multiple chart from chart.js in one .vue ponent and one .js file, how i can create it?

so far what i try is creating another .js file for each chart.

here my code

LineChart.js file

import {Line} from 'vue-chartjs'

export default {
  extends: Line,
  mounted () {

    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      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]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})

  }
}

Step2.vue ponent

<template>
  <div class="Chart">
    <h2>Linechart</h2>
    <line-example></line-example>
  </div>
</template>

<script>
import LineExample from './LineChart.js'
export default {
  name: 'tes',
  ponents: {
    LineExample
  }
}
</script>

this code is for one chart, if i want to add more chart then i have to create another .js file.

• javascript
• vue.js
• chart.js

• Think about parameterising the ponent, so that you can reuse. – Jyothi Babu Araja Commented Jun 17, 2019 at 5:40
• 1 You gotta make the chart data dynamic. Use props to do so. – jofftiquez Commented Jun 17, 2019 at 5:42

1 Answer 1

You can use props.

NOTE - For reactivity problems you can see https://vue-chartjs/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',
  ponents: {
    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>