Blazor Chart Cursor Offset

[dynamicrisk]

Hello,
I have a chart being in rendered into the following canvas.

Code: Select all

<tally-chart>
	<canvas id="canvas1" height="500" style="border: 0px solid #808080;" oncl />
</tally-chart>

I am trying to get my chart to extended to the end of my window without hard coding in a width.

I currently have width set to 100% as follows.

Code: Select all

tally-chart {
    display: flex;
    width: 100%;
    padding: 0;
    border: none;
    margin: 0;
    height: 500px
}

tally-chart > canvas {
    display: flex;
    width: inherit;
    height: inherit
}

An issue I am having though is the further I move my mouse cursor to the right, the more the chart thinks it is offset. I believe what is happening is the chart image is rendering into the canvas, and then the canvas is stretching to fill the screen. As a result it looks the chart doesn't recognize the correct location of the cursor. Is there a work around for this?

Thanks

[Marc]

Hello,

Dynamic resizing of the Chart can be managed via a resize method such as used here:

https://www.steema.com/files/public/tee ... /lines.htm

(resize window to see chart sizing)

See the call:

Code: Select all

resize(Chart1);

code (in demo.js):

Code: Select all

function resize(element) {
  if (element != null) {
    var w = 0, xContent, canvas, chart;

    if (element instanceof HTMLCanvasElement) {
      canvas = element;

      if (canvas.chart instanceof Tee.Chart) {
        chart = canvas.chart;

        xContent = $(canvas).closest('.x_content')[0];
        w = parseFloat(window.getComputedStyle(xContent, null).width) | w;

        canvas.width = w;
        chart.bounds.width = w;
        chart.draw();
      }
    }
  }
}

You may be able to use this code, adapted to your needs.

Regards,
Marc Meumann