I'm currently utilizing a chart component (Chartist) that needs an HTML element to serve as a parent during SVG rendering.
The elements that the chart requires are generated within a v-for loop, meaning they are not part of the DOM when the chart is rendered.
The code snippet in Vue looks like this:
<div v-for="chart in charts">
<h1>{{chart.Title}}</h1>
<div class="ct-chart" :id="'chart-' + chart.name"></div>
{{generateChart('#chart-' + chart.name, chart.Data}}
<div>
<span v-for="l in legend" :class="chart.ClassName">{{l.DisplayName}}</span>
</div>
Within the component:
generateChart(chartName: string, data: IChartData) {
/* More code here */
//html node not found in dom
new Chartist.Line(chartName, data, options);
// this worked
//var element = document.createElement("DIV");
//element.className = "ct-chart";
//document.body.appendChild(element);
//new Chartist.Line(element, data, options);
}
This leads to issues with Chartist failing on querySelectorAll.
Alternatively, if I create an element using document.createElement and append it to the body, the generation process works correctly.
Summary:
I aim to render a chart that relies on a DOM element for its visualization. However, due to Vue's virtual DOM rendering, there isn't an available element when the view – including the chart – is initially rendered by Vue.
Question:
Is there a way to instruct Vue to include a pre-existing HTML element? Or is there a method to delay the Chartist generation until Vue has completed adding everything to the actual DOM?
Workaround:
To address this issue, I am utilizing a timeout (setTimeout) to postpone the chart rendering until after Vue has finished rendering to the real DOM.