Setting a chart ID as a prop

[augnustin]

My Vue App has hot module reloading.

And I have a custom behavior on load event:

events: {
  load: (function(self) {
    return function() {
      self.charts = [...self.charts, this];
    };
  })(this),
}

But this method gets called on every component reload, hence it stores references to charts that are removed.

So I would like to being able to set a chart id. From multiple searches, it seems like the solution is to look at the renderTo div's ID. (It's a shame this doesn't belong to the Highcharts API itself but whatever).

So I would like to add an extra id prop that would call:

<chart id="my-id" :options="options" />

And would render:

    template: '<div ref="chart" :id="id"></div>',

Would this make sense? Would you be willing to merge that kind of request?

Cheers

[jszuminski]

Hi,

Apologies for the late response and thanks for reporting!

You actually have access to the chart container and you can manipulate this DOM element easily, adding the id to it.

Here's a code snippet:

<script>
  // ...
  const chartRef = ref(null);
  function setIdContainer() {
     const chart = chartRef.value.chart;
     chart.container.setAttribute('id', 'abc');
     chart.container.parentNode.setAttribute('id', 'parent-node');
   }
 </script>
<template>
  <highcharts :options="chartOptions" ref="chartRef" />
</template>

Here's a simple demo: https://jsfiddle.net/1hkrpcby/