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
- Implement ng2-charts in an Angular-Seed
- ChartJS: Show all tooltips with Total for Multi Pie chart
- charts.js chart showing old data on hover
- How to / Orientation to build a specific type of chart using library chart.js
- PhantomJS rendering empty image
- Is possible convert an associative array in indexed array in php?
- Chart.JS spacing and padding
- Reactive charts with Meteor : d3charts , Hightcharts , ChartJS , other?
- Chart.js - Can't hide PolarArea by using display:false
- chart.js 2.0 add new property to dataset
- Chart.js: Can I change the "OriginalOptions" variable within the chartjs-zoom-plugin?
- Remove custom Chart Js tool tip colour square
- Display some chart.js in the popup of chrome's extensions
- ChartJS remove previous chart when making new one
- How to order bubbles according their size and not by the order of their datasets?
- How could i change my JSON structure into chartJS barchart JSON structure?
- Chart.js I want to fix my xAxis to my yAxis position 0
- How to disable a custom tooltip for a dataset in Chart.js line chart?
- how to use chartjs-plugin-crosshair in Angular 6+?
- Chart.js - custom tooltip with multiple values
- How to create Bar chart that gets updated from new ajax requests with ChartJS?
- Django and ChartJS
- Limit data points with chart js
- Multiple canvas, reusable gradients
- Annotation plugin not working with Chart.js 2.8.0
- Unable to set width and height on canvas in chart js
- Set DataSource Of Chart.JS To Array
- Chartjs change values on resize
- Using chart js version 3, how to add custom data to external tooltip?
- How do I access chart.js options dynamically?