Chart series doesn't update

[FilipeamTeixeira]

I'm trying to dynamically update data in highchairs. On the long term the idea is to have a dropdown list but for now I'm focusing on just having a button working properly.

https://codesandbox.io/s/vue-template-ub45g

It's a custom made graph so there's a lot of data going into the series. So far, I have a file with the chart (i.e. Rose.vue), and an App.vue file. In the App.vue I have two variables (just as an example), original and updatedData. In theory if I would press the button, it should update the series to the updatedData. However, whenever I press it nothing happens. The data is fine, as if I change the series manually in the code, the chart is updated. However, I'm not sure why the button isn't doing what it is supposed to do.

The code is below, but it's better to check the codesandbox example.

        <template>
      <div>
        <Rose v-bind:options="chart1"/>
        <button @click="updateChart()">Update chart</button>
      </div>
    </template>

    <script>
    import Rose from "@/components/Rose";

    export default {
      components: {
        Rose
      },
      data() {
        return {
          chart1: {
            title: {
              text: null
            },
            subtitle: {
              text: null
            },
            legend: {
              enabled: false
            },
            series: original.value
          }
        };
      },
      methods: {
        updateChart() {
          this.chart1.series = updatedData.value;
        }
      }
    };

    var original = {
      name: "Aalst",
      value: [
        {
          data: [10],
          type: "column",
          color: "#AEA8A8",
          name: "TESTMARK",
          pointStart: 0,
          pointRange: 0.5
        },
        {
          data: [1.99759968],
          type: "column",
          color: "#1DACE8",
          name: "S_N_AT_Park_tot",

          pointStart: 0,
          pointRange: 25.71
        },

        {
          data: [3.069066148],
          type: "column",
          color: "#1DACE8",
          name: "S_N_CA_Park_tot",

          pointStart: 25.71,
          pointRange: 25.71
        },

        {
          data: [4.762283492],
          type: "column",
          color: "#1DACE8",
          name: "S_N_BTM",

          pointStart: 51.42,
          pointRange: 25.71
        },

        {
          data: [10],
          type: "column",
          color: "#AEA8A8",
          name: "TESTMARK",
          pointStart: 77.13,
          pointRange: 0.5
        },

        {
          data: [5.472831225],
          type: "column",
          color: "#AEA8A8",
          name: "S_N_TR",
          pointStart: 77.13,
          pointRange: 25.71
        },
        {
          data: [10],
          type: "column",
          color: "#AEA8A8",
          name: "TESTMARK",
          pointStart: 102.84,
          pointRange: 0.5
        },

        {
          data: [5.089290648],
          type: "column",
          color: "#F24D29",
          name: "S_P_DE",

          pointStart: 102.84,
          pointRange: 25.71
        },

        {
          data: [8.593398356],
          type: "column",
          color: "#F24D29",
          name: "S_P_DI",

          pointStart: 128.55,
          pointRange: 25.71
        },

        {
          data: [5.06165564],
          type: "column",
          color: "#F24D29",
          name: "S_P_DG",

          pointStart: 154.26,
          pointRange: 25.74
        },

        {
          data: [10],
          type: "column",
          color: "#AEA8A8",
          name: "TESTMARK",
          pointStart: 180,
          pointRange: 0.5
        },

        {
          data: [3.63565202],
          type: "column",
          color: "#EDCB64",
          name: "S_PP_MOT_sec",

          pointStart: 180,
          pointRange: 19.2825
        },

        {
          data: [2.033564998],
          type: "column",
          color: "#EDCB64",
          name: "S_PP_MOT_tert",

          pointStart: 199.2825,
          pointRange: 19.2825
        },

        {
          data: [1.464012915],
          type: "column",
          color: "#EDCB64",
          name: "S_PP_MOT_work",

          pointStart: 218.465,
          pointRange: 19.2825
        },

        {
          data: [1.284840194],
          type: "column",
          color: "#EDCB64",
          name: "S_PP_MOT_other",

          pointStart: 237.6475,
          pointRange: 19.2825
        },

        {
          data: [10],
          type: "column",
          color: "#AEA8A8",
          name: "TESTMARK",
          pointStart: 256.83,
          pointRange: 0.5
        },

        {
          data: [5.840454632],
          type: "column",
          color: "#C4CFD0",
          name: "S_PP_RID_orig",

          pointStart: 256.83,
          pointRange: 8.57
        },

        {
          data: [1.153663761],
          type: "column",
          color: "#C4CFD0",
          name: "S_PP_RID_rid",

          pointStart: 265.4,
          pointRange: 8.57
        },

        {
          data: [4.159545368],
          type: "column",
          color: "#C4CFD0",
          name: "S_PP_RID_dest",

          pointStart: 273.97,
          pointRange: 8.57
        },

        {
          data: [10],
          type: "column",
          color: "#AEA8A8",
          name: "TESTMARK",
          pointStart: 282.54,
          pointRange: 0.5
        },

        {
          data: [1.283496592],
          type: "column",
          color: "#76A08A",
          name: "S_PP_EFF_walk",

          pointStart: 282.54,
          pointRange: 25.71
        },

        {
          data: [4.765886288],
          type: "column",
          color: "#76A08A",
          name: "S_PP_EFF_bike",

          pointStart: 308.25,
          pointRange: 25.71
        },

        {
          data: [4.72029121],
          type: "column",
          color: "#76A08A",
          name: "S_PP_EFF_far",

          pointStart: 333.96,
          pointRange: 26.04
        }
      ]
    };

    var updatedData = {
      name: "Anzegem",
      value: [
        {
          data: [10],
          type: "column",
          color: "#AEA8A8",
          name: "TESTMARK",
          pointStart: 0,
          pointRange: 0.5
        },
        {
          data: [0.128017069],
          type: "column",
          color: "#1DACE8",
          name: "S_N_AT_Park_tot",

          pointStart: 0,
          pointRange: 25.71
        },

        {
          data: [0.403696498],
          type: "column",
          color: "#1DACE8",
          name: "S_N_CA_Park_tot",

          pointStart: 25.71,
          pointRange: 25.71
        },

        {
          data: [0.253077371],
          type: "column",
          color: "#1DACE8",
          name: "S_N_BTM",

          pointStart: 51.42,
          pointRange: 25.71
        },

        {
          data: [10],
          type: "column",
          color: "#AEA8A8",
          name: "TESTMARK",
          pointStart: 77.13,
          pointRange: 0.5
        },

        {
          data: [3.734963849],
          type: "column",
          color: "#AEA8A8",
          name: "S_N_TR",
          pointStart: 77.13,
          pointRange: 25.71
        },
        {
          data: [10],
          type: "column",
          color: "#AEA8A8",
          name: "TESTMARK",
          pointStart: 102.84,
          pointRange: 0.5
        },

        {
          data: [0.867670432],
          type: "column",
          color: "#F24D29",
          name: "S_P_DE",

          pointStart: 102.84,
          pointRange: 25.71
        },

        {
          data: [3.47744926],
          type: "column",
          color: "#F24D29",
          name: "S_P_DI",

          pointStart: 128.55,
          pointRange: 25.71
        },

        {
          data: [0.994857797],
          type: "column",
          color: "#F24D29",
          name: "S_P_DG",

          pointStart: 154.26,
          pointRange: 25.74
        },

        {
          data: [10],
          type: "column",
          color: "#AEA8A8",
          name: "TESTMARK",
          pointStart: 180,
          pointRange: 0.5
        },

        {
          data: [0],
          type: "column",
          color: "#EDCB64",
          name: "S_PP_MOT_sec",

          pointStart: 180,
          pointRange: 19.2825
        },

        {
          data: [0],
          type: "column",
          color: "#EDCB64",
          name: "S_PP_MOT_tert",

          pointStart: 199.2825,
          pointRange: 19.2825
        },

        {
          data: [0.36406198],
          type: "column",
          color: "#EDCB64",
          name: "S_PP_MOT_work",

          pointStart: 218.465,
          pointRange: 19.2825
        },

        {
          data: [0.748181912],
          type: "column",
          color: "#EDCB64",
          name: "S_PP_MOT_other",

          pointStart: 237.6475,
          pointRange: 19.2825
        },

        {
          data: [10],
          type: "column",
          color: "#AEA8A8",
          name: "TESTMARK",
          pointStart: 256.83,
          pointRange: 0.5
        },

        {
          data: [9.28512162],
          type: "column",
          color: "#C4CFD0",
          name: "S_PP_RID_orig",

          pointStart: 256.83,
          pointRange: 8.57
        },

        {
          data: [0.027799127],
          type: "column",
          color: "#C4CFD0",
          name: "S_PP_RID_rid",

          pointStart: 265.4,
          pointRange: 8.57
        },

        {
          data: [0.71487838],
          type: "column",
          color: "#C4CFD0",
          name: "S_PP_RID_dest",

          pointStart: 273.97,
          pointRange: 8.57
        },

        {
          data: [10],
          type: "column",
          color: "#AEA8A8",
          name: "TESTMARK",
          pointStart: 282.54,
          pointRange: 0.5
        },

        {
          data: [1.393719008],
          type: "column",
          color: "#76A08A",
          name: "S_PP_EFF_walk",

          pointStart: 282.54,
          pointRange: 25.71
        },

        {
          data: [5.832167832],
          type: "column",
          color: "#76A08A",
          name: "S_PP_EFF_bike",

          pointStart: 308.25,
          pointRange: 25.71
        },

        {
          data: [3.685239492],
          type: "column",
          color: "#76A08A",
          name: "S_PP_EFF_far",

          pointStart: 333.96,
          pointRange: 26.04
        }
      ]
    };
    </script>

[Denyllon]

Hi @FilipeamTeixeira ,

Thank you for contacting us. Your button does not work properly due to fact that changes on the options prop within Rose component are not watched at all. You need to handle changes on the value of that prop using Vue's watch definition, like in example below:

  watch: {
    options: {
      handler(newOptions) {
        this.chartOptions.series = newOptions.series
      },
      deep: true
    }
  },

Live example: https://codesandbox.io/s/vue-template-3j6dw

Kind regards, and sorry for a bit of late in reply!