Typescript: Highcharts not accepting series unless it is individually added

user_6758319 0
Viewed 417

I have been trying to render Data inside my chart using Highcharts but for whatever reason is is not accepting the parameters I send to addSeries method. I tried adding 'series as an array of objects. i tried adding one at a time with 'forEach' and the method bellow but it doesnt work and i always get this error

*Argument of type '{ name: string; type: string; color: string; data: number[]; stack: string; }' is not assignable to parameter of type 'SeriesOptionsType'.
  Type '{ name: string; type: string; color: string; data: number[]; stack: string; }' is not assignable to type 'SeriesXrangeOptions'.
    Types of property 'data' are incompatible.
      Type 'number[]' is not assignable to type 'XrangePointOptionsObject[]'.
        Type 'number' has no properties in common with type 'XrangePointOptionsObject'.Vetur(2345)
let series: {
    name: string;
    type: string;
    color: string;
    data: number[];
    stack: string;
}[]*

this is the entire code of my chart. it is rendered in a div with the corresponding id

<script lang="ts">
import { defineComponent } from 'vue'

import Highcharts from 'highcharts'
import Exporting from 'highcharts/modules/exporting'

Exporting(Highcharts)
let series = [
  {
  name: 'Name 1',
  type: 'bar',
  color: '#4E868E',
  data: [5,6],
  stack: 'hello'
  },
  {
  name: 'Nam2',
  type: 'bar',
  color: '#4E868E',
  data: [1,2],
  stack: 'hello'
  }
]
export default defineComponent({
  data () {
    return {
    }
  },
  mounted () {
    const chart = Highcharts.chart('newChart', {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Test chart'
      },
      xAxis: {
        categories: ['Cat1', 'Cat2]
      },
      yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
          text: 'Results'
        }
      },
      plotOptions: {
        bar: {
          stacking: 'hello',
          dataLabels: {
            enabled: true
          }
        }
      }
    })
    let i = 0;
    for( ; i < 4; i++ ) {
      console.log()
        chart.addSeries( series[i], false );
    }
    chart.addSeries(series[5]);
  }
})
</script>

It only works if I do 'charts.addCHarts' multiple times in a row with each series being an object of it's own outside of the array.

quasar typescript highcharts
1 Answers

You can add new series by assigning data to them in the following way.

  this.chartOptions.series[1] = asyncData;
  this.chartOptions.series[2] = asyncData1;

Notice you didn't load chartOptions, and the addSeries option is used to add a single series. https://github.com/highcharts/highcharts-vue#configure

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

https://api.highcharts.com/class-reference/Highcharts.Series

<template>
  <div>
    <highcharts
      :options="chartOptions"
      ref="lineCharts"
      :constructor-type="stockChart"
    ></highcharts>
  </div>
</template>

<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import exportingInit from "highcharts/modules/exporting";
import stockInit from "highcharts/modules/stock";

import { EventBus } from "./../event-bus.js";

stockInit(Highcharts);
exportingInit(Highcharts);

const asyncData = {
  name: "Tokyo",
  marker: {
    symbol: "square",
  },
  data: [
    Math.floor(Math.random() * 10),
    Math.floor(Math.random() * 10),
    Math.floor(Math.random() * 10),
    Math.floor(Math.random() * 10),
  ],
};

const asyncData1 = {
  name: "Tokyo1",
  marker: {
    symbol: "square",
  },
  data: [
    Math.floor(Math.random() * 10),
    Math.floor(Math.random() * 10),
    Math.floor(Math.random() * 10),
    Math.floor(Math.random() * 10),
  ],
};

export default {
  props: {
    partsdata: {
      type: Array,
    },
  },

  components: {
    highcharts: Chart,
  },

  created() {
    EventBus.$on("btn-clicked", (data) => {
      this.chartOptions.series[0].data = data.newData;
    });
    EventBus.$on("btn-load", () => {
      this.chartOptions.series[1] = asyncData;
      this.chartOptions.series[2] = asyncData1;
    });
  },

  data() {
    return {
      chartOptions: {
        chart: {
          type: "spline",
          title: "Hassaan",
        },
        xAxis: {
          categories: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun",
            "Jul",
            "Aug",
            "Sep",
            "Oct",
            "Nov",
            "Dec",
          ],
        },
        tooltip: {
          crosshairs: true,
          shared: true,
        },
        credits: {
          enabled: false,
        },
        plotOptions: {
          spline: {
            marker: {
              radius: 4,
              lineColor: "#666666",
              lineWidth: 1,
            },
          },
        },
        series: [
          {
            data: [1, 2, 3],
          },
        ],
      },
    };
  },
};
</script>

Demo: https://codesandbox.io/s/vue-template-forked-fwo68?file=/src/components/Chart.vue

user_121716730
Related