Destroy ChartJS rendered with Symfony-CodePudding

i have a little problem with my Symfony/ChartJS Application.

So if i create a Chart with JS like var myChart = new Chart.. and so on, i can easily destroy the Chart with myChart.destory(); because i can address the ChartObject.

My Problem: The first Chart i Render with my SymfonyController. So i render the chart in my Controller with

return $this->render('category.html.twig', [
         'chart' => $chart]);

In Twig i assign an ID to the Chart {{ render_chart(chart, {'id': 'my-chart'}) }}. But i dont really know how i can adress the whole Chartobject in Js. So how i can destroy the Chart i created with my Symfonycontroller? Anyone have a suggestion?

Thank you in advance!

//EDIT The normal way with const chart = Chart.getChart('my-chart'); don't work either. Here is my Canvas-ConsoleLog for more information:

<canvas data-controller="symfony--ux-chartjs--chart" data-symfony--ux-chartjs--chart-view-value="(i deleted the values for better legibility)" id="my-chart" style="display: block; box-sizing: border-box; height: 407.778px; width: 816.667px;" width="735" height="367"></canvas>

The strange thing: when i try the log: console.log(document.getElementById("my-chart").getContext("2d");); it shows:

  CanvasRenderingContext2D {canvas: canvas#my-chart, globalAlpha: 1, globalCompositeOperation: 'source-over', filter: 'none', imageSmoothingEnabled: true, …}
canvas: canvas#my-chart
direction: "ltr"
fillStyle: "#000000"
filter: "none"
font: "12px \"Helvetica Neue\", Helvetica, Arial, sans-serif"
globalAlpha: 1
globalCompositeOperation: "source-over"
imageSmoothingEnabled: true
imageSmoothingQuality: "low"
lineCap: "butt"
lineDashOffset: 0
lineJoin: "miter"
lineWidth: 1
miterLimit: 10
shadowBlur: 0
shadowColor: "rgba(0, 0, 0, 0)"
shadowOffsetX: 0
shadowOffsetY: 0
strokeStyle: "#000000"
textAlign: "start"
textBaseline: "alphabetic"
[[Prototype]]: CanvasRenderingContext2D

so the log shows that the chart is recognized...

CodePudding user response：

You can use the getChart api method chart.js exposes on itself.

So when you know the ID of your canvas you can use this js to get the chart object:

const chart = Chart.getChart('my-chart');

CodePudding user response：

symfny-ux controller creates its own instance of ChartJS inside an appropriate stimulus-controller, and this variable isn't directly accessible. But, symfony/ux developers are smart, and they created events (e.g. chartjs:connect) which you can listen to (link)

If you do so, you will end up with a JS native CustomEvent object and in the details property of this event you will find passed chart instance previously created in symfiny-ux-controller for chart.js So in theory you would be able just to

document.addEventListener("chartjs:connect",(chartEv) => { 
console.log(chartEv.details); // chartEv.details.chart.destroy()
});

I do recommend you to watch Ryan's tutorial on Symfony UX, especially "Extending a UX Controller" chapter where he tries to work with previously created instance of new Chart() like in your case.