Chart.js has very thoroughdocumentation (yes, you're reading it),API reference, andexamples. I want to draw a horizontal bar chart with Chart.js but it keeps scaling the chart instead of using the height I assign the canvas form the script. Latest version: 5.2.0, last published: 3 months ago. For example, you can customize canvas background or add a border to it with simple ad-hoc plugins. Thus chart will scale nicely with aspect ratio of 2.5 until it hits the maximum height which is 530px here and stops scaling afterwards. You should use html height attribute for the canvas element as: Set the aspectRatio property of the chart to 0 did the trick for me See, there is a mistake in the initializing statement. You may also find that, due to complexities in when the browser lays out the document for printing and when resize events are fired, Chart.js is unable to properly resize for the print layout. Now, reset caches with rm -rf .parcel-cache and start the application again with npm run dev, yarn dev, or pnpm dev. We will do that by utilizing chart's "datavalidated" event, which kicks in at the moment when chart has finished processing its data. What kind of tool do I need to change my bottom bracket? Comment! canvas { height: 100 !important }. after adding maintainAspectRatio If you disable the maintain aspect ratio in options then it uses the available height: The easiest way is to create a container for the canvas and set its height: Seems like var ctx = $('#myChart'); is returning a list of elements. after setting width of parent When it comes to changing the chart size based on the window size, a major limitation is that the canvas render size (canvas.width and .height) can not be expressed with relative values, contrary to the display size (canvas.style.width and .height). Chart.js is highly customizable with custom plugins (opens new window) to create annotations, zoom, or drag-and-drop functionalities to name a few things. You can specify the chart size in two places: in the HTML of the container
element, or in the chart options. How do I check whether a checkbox is checked in jQuery? the other answers did not work. How to change the size of D3.js-based graphs in javascript. You can also call chart.render() to force the chart to readjust its size at any time. So we can bridge the data of Chart.js with Javascript and set a height in css. Start using react-chartjs-2 in your project by running `npm i react-chartjs-2`. Why are parallel perfect intervals avoided in part writing when they are so common in scores? and then inside options object of javascript set maintainAspectRatio to false to consider and use parent element height which in this case is absolute positioned and sized relative to the grandparent's size. Locale comes with the following built-in chart types: First, add a link to the providing CDN (Content Delivery Network): Then, add a