Chartjs-Blazor ChartJs: Expanding bar to the end of the canvas

by

0👍

✅

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}");

Leave a comment