duplicate _containerId being generated when using CanvasJSREact

[frevd]

I’m having trouble rendering multiple charts.
It turns out that the internal IDs which are then assigned to the Canvas DOM elements are identical, probably generated from the current timestamp, which is the same when rendering is fast.
How can I fix that (e.g. via onRef) without having to wait?

[Vishwas R]

@frevd,

The auto-generated container-id seems to be working fine, container-id are not dependent on the timestamp. Kindly download react chart-component from our download page & try if it works fine. If you are still facing issue with latest version of chart-component, kindly create sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive so that we can run it locally at our end, understand the scenario better and help you resolve.

—
Vishwas R
Team CanvasJS

[frevd]

PS: In the case that I see 2 of 4 charts rendered, the generated ID is sequential, indicating some kind of timestamp use.

canvasjs-react-chart-container-1654521698465
and
canvasjs-react-chart-container-1654521698466

where new Date(1654521698465) turns out to be Mon Jun 06 2022 15:21:38 GMT+0200 (Central European Summer Time), which is now in my local time. So this is proof that the container IDs are dependent on timestamps.

[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

[Vishwas R]

Matt,

We don’t have official npm package as of now. The package that you are using is a third-party one. Kindly download the official react-component from our download page. Please refer to this documentation page for step-by-step instruction on integration.

—
Vishwas R
Team CanvasJS

[Adithya Menon]

Matt,

We have just added CanvasJS React Chart & StockChart packages to NPM registry. Now, you can add our React chart & stockchart packages to your React application via NPM. Please refer to the release blog for more information. Please check out our NPM package and let us know your feedback.

—
Adithya Menon,
Team CanvasJS