S
S
Sergey750il2022-03-30 17:57:21
Vue.js
Sergey750il, 2022-03-30 17:57:21

Which vue plotting plugin is the most flexible and simple?

Good day. What plugin would you recommend besides vue-chartjs?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexander, 2022-03-31
@Sergey750il

Just a week ago I integrated chart.js without a plugin. There is a great method there: update. When changing props, call chart.update in watch.
Dataset as a computed property and, when props changed, the dataset was updated using chart.update
Here is a piece straight from the component:

spoiler
<template>
  <div class="chart">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js/dist/chart.js';

export default {
  name: 'Chart',
  props: {
    actions: {
      type: Array,
      // ...
    }
  },
  computed: {
    ctx(){
      return this.$refs?.canvas?.getContext('2d');
    }
  },
  watch: {
    actions(){
      const points = calculePoints.call(this);

      this.chart.data.labels = points;
      this.chart.data.datasets[0] = {
        label: '',
        data: /* ... */,
        backgroundColor:  /* ... */,
        borderColor:  /* ... */,
        borderWidth: 3
      };
      this.chart.update();
    }
  },
  mounted(){
    this.chart = new Chart(this.ctx, {
      type: 'line',
      data: {
        labels: //...,
        datasets: [{
          label: '',
          data:  /* ... */,
          backgroundColor:  /* ... */,
          borderColor: [/* ... */],
          borderWidth: 3
        }]
      },
      options: { /* ... */ }
    });
  }
}
</script>

It’s hard to call it ideal, but the task was to pull the schedule very quickly)

O
Oleg Kirillov, 2022-03-30
@exmach

I started amcharts.js for a vue project, which required several dozens of the most diverse charts, and I am very pleased with how everything turned out in the end both visually and in terms of speed.
But, of course, IMHO.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question