score: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}");
Source: stackoverflow.com
Related Query
- Blazor ChartJs: Expanding bar to the end of the canvas
- How to add space Between Columns in Bar chartjs and remove the space in the end
- Truncating canvas labels in ChartJS while keeping the full label value in the tooltips
- ChartJs bar chart - keep bars left instead of equally spread across the width
- Border radius for the bar chart in ChartJS
- How to change the cursor to a pointer when I hover over a bar in a ChartJS bar chart?
- Grouping the object by key for Chartjs bar chart
- unable to add background color to the canvas using jspdf and chartjs
- Adding image on the top of bar in chartjs
- Charts.js candlestick (Financial Charts) displays half the bar in the beginning and the end
- Chartjs - Set start and end value into a Bar Chart
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- ChartJS bar chart - trigger hover even when the cursor is outside of the bar
- How to set the chartjs bar graph scale to the highest value in the result data
- Display Bar chart values in the graph - ChartJS
- How can I append a calculated value to the end of a bar in Chart.JS?
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- ChartJS - Show values in the center of each bar
- How to get the data attribute of the canvas chart created using chartjs
- How to show the chartjs bar chart data values labels as text?
- ChartJS keeps resizing canvas to the default size
- The bar that contains a low value is almost invisible on the chartjs
- how to show bar value on the top of each bar in chartjs
- ChartJS - Horizontal Stacked Bar Chart Tooltip being cut off by Bottom of Canvas
- Show Count on top of the bar graph - ChartJS
- How to add additional label in the middle of each bar using ChartJS
- Detect if the click is in bar or outside of bar in ChartJS
- ChartJS - would like to create a mixed chart with horizontal Bar and a dot to represent the answer from the current user
- ChartJS vertical bar chart - measure percentage of the data in each column based on a specified max
- ChartJs (ver: 2.8.0): Custom tooltip does not hide if clicked (or mouse pointer is moved) outside the chart canvas area
More Query from same tag
- ChartJS dynamic line chart ghosting back to old data when hovered on
- How to set ticks on axes dynamically with chart.js?
- Html5 web page with chartjs: loading an external json file and create a line chart
- Chartjs different row background colors according to Y axis values
- ChartJS doesn't draw the chart
- How to only draw the graph and the Xaxis gridlines using chart.js
- Resizing chart before downloading as image
- How can I get suggestedMax number for yAxes?
- How to customize Data Labels of area chart on ChartJS?
- Remove custom Chart Js tool tip colour square
- Chart.js How to get min-max values of X axis?
- Cannot make my chart to work with data from mongoDB
- how to add second axes to chart JS
- Bootstrap 3 tabs & Chart.js - charts not loading on tabs
- How to change font size, padding of chart title only, in chart.js 3.x
- How to change the display of an axis Chart.js
- Understanding Chart.js and Adding Legends to Pie Charts
- How to create a variable for chart js datalabel plugin formatter
- Combine\Merge Same Label in Pie Chart
- How to edit the ID of each button in a class if a condition is true in JavaScript?
- Pie chart is not getting rendered in ChartJS
- Fix ChartJS Values not Well Displayed
- How to fix map is not function even there is already set data in the useState using React Hook
- How to eliminate all borders from chartjs2 stacked chart
- ChartJS Line chart cut off at the top and bottom
- Django admin/ Chart js error - super() takes at least 1 argument (0 given)
- How to Integrate Chart.Funnel.js in Chart.js
- Primefaces charts replaced by chartJS?
- ChartJS does not display the legend
- Date range picker and chart js