Graph wont render

[GergoEB]

Im trying to make a graph with the following code:

const opts = {
          width: 200,
          height: 160,
          axes: [
            {
              show: false
            },
            {
              show: false
            }
          ],
          series: [
            {

            },
            {
              label: "Players",
              scale: "Players",
              value: (u, v) => v == null ? null : v + " Players",
              stroke: context.color,
              width: 2 / devicePixelRatio,
              points: { show: false },
              fill: "${context.color}44"
            }
          ],
          scales: {
            x: {
              time: true
            },
            y: {
              auto: true
            },
          },
          legend: {
            show: false
          }
        };
                        //snippet of real data
        const edata = [1685733302.004, 1685733302.004, 1685733303.004, 1685733304.004, 1685733305.004]
        const eplayers = [1,2,3,4,3]

        this.chart = new uPlot(opts, [edata, eplayers], document.getElementById("chart-canvas-${context.ID}"));

It works, until i place it into 1 specific project in which case it just half creates the chart:

Failed chart

<div id="chart-canvas-1350">
  <div class="uplot u-hz">
    <div class="u-wrap">
      <div class="u-under"></div>
      <canvas></canvas>                <==== no width / height
      <div class="u-over">
        <div class="u-cursor-x"></div>
        <div class="u-cursor-y"></div>
        <div class="u-select"></div>
        <div class="u-cursor-pt u-off" style="width: 8.333px; height: 8.333px; margin-left: -4.1665px; margin-top: -4.1665px; transform: translate(-10px, -10px);"></div> <===== missing style
      </div>
    </div>
  </div>
</div>

and working chart:

<div id="chart-canvas-65">
  <div class="uplot u-hz">
    <div class="u-wrap" style="width: 200px; height: 160px;">
      <div class="u-under" style="left: 0px; top: 0px; width: 200px; height: 160px;"></div>
      <canvas width="150" height="120"></canvas>
      <div class="u-over" style="left: 0px; top: 0px; width: 200px; height: 160px;">
        <div class="u-cursor-x u-off" style="transform: translate(-10px, 0px);"></div>
        <div class="u-cursor-y u-off" style="transform: translate(0px, -10px);"></div>
        <div class="u-select" style="left: 0px; width: 0px; top: 0px; height: 0px;"></div>
        <div class="u-cursor-pt u-off" style="width: 8.333px; height: 8.333px; margin-left: -4.1665px; margin-top: -4.1665px; transform: translate(-10px, -10px); background: rgb(255, 255, 255); border-color: rgb(255, 255, 255);"></div>
      </div>
    </div>
  </div>
</div>

Not sure why this could be, i tried printing the chart object to console but the 2 are identical. I also tried taking the code that is generated by js and placing it into a plain html file, it works then (so no css interference)

Any help appreciated

[leeoniya]

i don't see anything obviously wrong, but i cannot help you troubleshoot code i cannot run and get to fail. please make a runnable jsfiddle like https://jsfiddle.net/0bvks7cw/1/ that exhibits the issue.

[GergoEB]

Solved, i reordered the graphs by taking innerhtml element it was inside of, this probably was the cause... how can i reorder but safely?

[leeoniya]

i'm still not sure exactly what you're asking

[GergoEB]

My initial issue was because of the fact I took the parent element of the graph and took their innerhtml and used it to reorder the elements on the page, this is what caused the error. What is the correct way to do this? Or do I just give uplot the new element after editing it?

[leeoniya]

took their innerhtml and used it to reorder the elements on the page

innerHTML is not how you move elements around the DOM in JavaScript. i don't think the issue here is with uPlot but with general DOM/JS familiarity.

after editing it

"editing it" is not a DOM concept. i have no idea what you mean.

please make a jsfiddle like i originally asked in https://github.com/leeoniya/uPlot/issues/837#issuecomment-1581923050. i can re-open this once there is runnable code.