CODEWITHSUNDEEP
highchartsvuejs2axios
vahndi
vahndi

Reputation: 1045

Draw variable number of series with highcharts-vue and axios

I'm trying to load an unknown number of series to populate my chart from an http request using axios. Does anyone know how to do this? I can only load a set number of series by setting e.g. series = [{}, {}, {}, {}, {}] for 5 series.

./App.vue

<template>
  <div id="app">
    <bar-chart>
    </bar-chart>
  </div>
</template>

<script>

  import BarChart from './components/BarChart'

  export default {
    name: 'app',
    components: {BarChart},
  }

</script>

./components/BarChart.vue

<template>
  <highcharts class="chart" :options="chartOptions">
  </highcharts>
</template>

<script>
  import axios from 'axios';

  export default {
    name: "BarChart",
    data() {
      return {
        chartOptions: {
          chart: {
            type: 'column'
          },
          series: [{}]
        }
      }
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData: function () {
        var vm = this;
        var dataUrl = 'http://127.0.0.1:8001/test-url/kpis/my-test-url/';
        axios.get(dataUrl)
          .then(function (response) {
            var data = response.data;
            vm.chartOptions = data;
          })
      }
    }
  }
</script>

Upvotes: 0

Views: 632

Answers (1)

morganfree
morganfree

Reputation: 12472

This looks like a bug because the vue component updates a chart with disabled oneToOne option - see chart.update(). I have reported it on github.

You can always use chart's imperative methods to add series:

  axios.get(dataUrl)
    .then(res => {
      res.data.forEach(series => {
        this.$children[0].chart.addSeries(series)
      })
    })

Keep in mind that if you do this, chart options will not be in sync with the chart anymore - so it might lead to some unexpected issues.

Upvotes: 2

Related Questions