score:52
i also needed a responsive canvas and had this issue. this was my fix:
<div>
<canvas id="chart"></canvas>
</div>
since chart.js scales the canvas to the width of the container, ignoring the padding, i just wrapped the canvas in a div
. the div
scales to the container with padding, respecting the padding, and then the responsive chart.js canvas
scales to the div
.
score:-1
"if for example, you wanted all charts created to be responsive, and resize when the browser window does, the following setting can be changed:"
chart.defaults.global.responsive = true;
"now, every time we create a chart, options.responsive will be true."
source: http://www.chartjs.org/docs/
score:0
i wrapped the in and then used this css.
.chart-container {
box-sizing:border-box;
margin:2%;
width:96%;
}
this keeps it padded from the edges and responsive. i used 2% but you can use whatever percentages suit your layout.
score:3
in your jsfiddle example change the responsive
attribute to false:
var options = {
maintainaspectratio: true,
responsive: false
};
the previous setting added a additional 30px to both the height and width when you inspect the element using chrome dev tools. because of the size of the canvas it should not be problematic when it comes to resizing of the canvas.
score:3
a better solution is to use
.container {box-sizing: border-box;}
score:4
i too googled for this problem and ended up with a simple solution.
i added height
so that it automatically adjust the width accordingly and show it in a nicer way. if u really want you could add width
too. the canvas
element is part of html5
.
it does not allow you to input values with px
. so ignore that and just type tha numerical value u need.
<canvas id="mychart" height="80"></canvas>
Source: stackoverflow.com
Related Query
- Why is chart.js canvas not respecting the padding of the container element?
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How to clear/destroy Chart.js canvas when the chart is represented as a react JSX element
- vertical grid line not taking full hight of the canvas in chart js 3.3.2
- Why is the data from my API not displaying on my chart.js chart in React?
- ChartJs (ver: 2.8.0): Custom tooltip does not hide if clicked (or mouse pointer is moved) outside the chart canvas area
- Chart.js is not respecting my container dimensions
- Chart.js responsive option - Chart not filling container
- Chart looks only grey, does not show the color - Chartjs,discordjs
- Why can I not see a data value when hovering over a point on the radar chart?
- Chart.js pie chart not showing in Google Chrome canvas
- Chart.js update function (chart,labels,data) will not update the chart
- Annotation events not update the chart
- ChartJS: Remove padding to the right of chart caused by tick labels
- Why is the child component updating but not re-render Reactjs
- Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. chat.JS
- Chart js 2.x renders the canvas invisible
- chart is not getting updated from the values it received from Jquery
- Chartjs destroy method not affecting the chart
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- How do I add padding on the right of tooltip, but not the left in Chart.js?
- Chartjs graphs are not respecting height of container
- Why prettier put a comma ',' at the last element of the object
- React JS Chart JS 2 is not hiding the grid lines in the background
- Background color of the chart area in chartjs not working
- How to make the chart smaller than its container
- Why is this bar chart using chart.js not rendering in react.js?
- why the main and axis title does not show in chart.js
- Why is my Chart.JS canvas not destroying?
- The chart list is not showing
More Query from same tag
- Issue with int numbers using chart.js
- Chart js scatter graph labels
- Chart.JS custom legend onClick event returns error when calling original event handler
- Getting (X,Y) point on mouse click on chart
- Using two JSON objects to make Chart.JS Bar Chart Dynamic in Typescript / Angular
- bower degrades chart.js each time installing other packages
- Chart JS Fill Between two lines
- Doughnut chart - interaction with specific segment of a chart
- How to remove a label in top of bar in chartjs chart
- Charts.js: Load new data set to an existing chart
- How to get rid of the line on top of every point on a line chart (Chart.js)
- ChartNew.js - Remove/Hide zero label from Pie Chart
- Why is ChartJS skipping an xAxis label in this snippet?
- How to customize horizontal bar in chart.js?
- Laravel - Bootstrap Javascript's conflict with Chart.js
- Chart.js core.js:6162 ERROR Error: "line" is not a registered controller
- Chart.js. Edit bar width -v2.5-
- Unable to hide X-Axis in horizontal stacked chart.js
- Chart.js - Where do I find which components should be registered?
- chartJS line chart not plotting values that are less than minY
- Format chart.js x labels
- Is There any way to show image on top of the stacked bar, Am getting image on every color Instead of that i need only on top of each bar
- How to clear a chart from a canvas so that hover events cannot be triggered?
- Angular Charts.js: Can't refresh chart with data
- chart.js display even intervals between two dates and adding label to y axes
- How to draw a horizontal line over bar columns in Chart.js that's started from X axis?
- Adding image on chart js
- how to set color for each datapoint in chartjs-chart-treemap
- Chart.js line chart is not displaying
- Create Chart using Reactjs Chartjs and axios