chart.js demo3

// src/components/LineChart.vue

<script>
import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  props: ['chartdata', 'options'],
  mounted() {
    this.renderChart(this.chartdata, this.options)
  }
}
</script>


// src/App.vue
<div class="col-md-10 mt-3">
          <LineChart :chartdata="lineChartData" :options="options" />
</div>

export default {
  name: 'app',
  components: {
    BarChart, LineChart, PieChart
  },
  data() {
    return {
      lineChartData: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'Weight track',
            backgroundColor: "transparent",
            data: [75, 75.6, 77.8, 78.1, 79.1, 80, 78.5],
            borderColor: "rgba(1, 116, 188, 0.50)",
            pointBackgroundColor: "rgba(171, 71, 188, 1)"
          }
        ]
      },
      pieChartData: {
        labels: ['Angular', 'Vue', 'React'],
        datasets: [
          {
            backgroundColor: ['#e74c3c', '#1abc9c', '#3498db'],
            data: [15, 25, 60]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },
}