Home › Forums › Chart Support › duplicate _containerId being generated when using CanvasJSREact › Reply To: duplicate _containerId being generated when using CanvasJSREact
@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, "Lucida Grande", "Lucida Sans Unicode", 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