Forum Replies Created by frevd

Viewing 2 posts - 1 through 2 (of 2 total)
  • @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

    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.

Viewing 2 posts - 1 through 2 (of 2 total)