Reply To: duplicate _containerId being generated when using CanvasJSREact

[frevd]

@Vishwas R,

Thank you for the reply and the link.
I took my version from https://www.npmjs.com/package/canvasjs-react-charts, which I now see was updated last 2 years ago (should maybe be renewed, since many people include and update it as a module in their package.json, where downloading it directly is not the way to go).

The newer version does NOT work either.
If I render 4 pie charts next to each other, I see only one or sometimes two, because of duplicate ids in the DOM, which looks like this:

<div id="canvasjs-react-chart-container-1654521183227" style="width: 100%; position: relative; height: 250px;">
    <div class="canvasjs-chart-container"
        style="position: relative; text-align: left; cursor: auto; direction: ltr;"><canvas
            class="canvasjs-chart-canvas" width="449" height="449"
            style="width: 250px; height: 250px; position: absolute; user-select: none;"></canvas><canvas
            class="canvasjs-chart-canvas" width="449" height="449"
            style="width: 250px; height: 250px; position: absolute; -webkit-tap-highlight-color: transparent; user-select: none;"></canvas>
        <div class="canvasjs-chart-toolbar"
            style="position: absolute; right: 1px; top: 1px; border: 1px solid transparent;"></div>
        <div class="canvasjs-chart-tooltip"
            style="position: absolute; height: auto; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 2px; z-index: 1000; pointer-events: none; display: none; border-radius: 5px;">
            <div
                style="width: auto; height: auto; min-width: 50px; line-height: normal; margin: 0px; padding: 5px; font-family: Calibri, Arial, Georgia, serif; font-weight: normal; font-style: italic; font-size: 14px; color: rgb(0, 0, 0); text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px; text-align: left; border: 2px solid gray; background: rgba(255, 255, 255, 0.9); text-indent: 0px; white-space: nowrap; border-radius: 5px; user-select: none;">
                Sample Tooltip</div>
        </div><a class="canvasjs-chart-credit" title="JavaScript Charts" tabindex="-1" target="_blank"
            href="https://canvasjs.com/"
            style="outline: none; margin: 0px; position: absolute; right: 2px; top: 236px; color: dimgrey; text-decoration: none; font-size: 11px; font-family: Calibri, &quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, sans-serif;">CanvasJS.com</a>
    </div>
</div>
<div id="canvasjs-react-chart-container-1654521183227" style="width: 100%; position: relative; height: 250px;">
</div>
<div id="canvasjs-react-chart-container-1654521183227" style="width: 100%; position: relative; height: 250px;">
</div>
<div id="canvasjs-react-chart-container-1654521183227" style="width: 100%; position: relative; height: 250px;">
</div>

Best,
Matt