score:0

Accepted answer

i created my own code to do this because i could not get the chart width to consistently expand to the end of the table cell. the requirements changed slightly as well, so i needed to draw an empty rectangle representing 100% of the goal and then filling the rectangle with a percentage of how complete the goal was.

first, i have a javascript method that gets the width of the canvas, calculates how many pixels to draw based on that width and the "value" variable (which is a percentage), then uses the context to first draw a clear rectangle. it draws a filled rectangle representing the progress to the goal:

 function buildcanvas(canvasid, value) {
    var canvaswidth = document.getelementbyid(canvasid).offsetwidth;
    var calculatedwidth = parseint(canvaswidth * value);

    var canvastodraw = document.queryselector('#' + canvasid);
    const ctx1 = canvastodraw.getcontext('2d');
    ctx1.clearrect(0, 0, 300, 150);

    ctx1.fillstyle = 'rgba(173, 116, 76, 1.0)';
    ctx1.fillrect(0, 0, calculatedwidth, 150);
}

i define the chart that i want to draw:

<canvas id="chart" style="border: 1px solid #ad744c; height: 18px; width: 300px">

i then inject ijsruntime and call the javascript method to draw the rectangle, the value being the goal divided by the value to get a percentage:

@inject ijsruntime jsruntime    
...
jsruntime.invokeasync<string>("buildcanvas", $"chart", $"{value}");

Related Query

More Query from same tag