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
- Chart.js stacked bar chart - sorting values in bar by value
- Show and plot zero values on ChartJS line graph when no data
- warning in chartjs/react-chartjs options assignment if setting type:'time'
- Can't size doughnut chart from chart.js
- Customize legend AngularJS
- Changing the base of the logarithmic scale in Chart.js
- Using Chart.js with SvelteKit
- Update chart axis labels after hover - chart.js
- ChartJS 2.6 - Bar chart fixed height scrollable-X
- How to mutate VueJS prop?
- How to format x-axis time scale values in Chart.js v2
- How can I display both values as labels when hovering over chart.js
- Is there a way to display legend's data over the chart in chart.js?
- Can I make Y axis begin at specific value in ChartJS?
- Attach onAnimationComplete for Chart.js after creation
- How to fetch data from Json file on charts(bar-chart/pie chart etc) in angular?
- Chartjs bar chart blurry when height is set
- Change background transparency of Chart.js chart
- Use JSON file with chart.js
- How to maintain chartjs / ng2-charts gradient on window resize?
- Laravel trying to display chart on welcome page
- How to take data from an API and create a chart on that using Chart.js and Angular 8?
- React with chart js, labelling problems in multiple datasets for doughnut chart
- Chart.js showing nothing on canvas
- using library without 'require' when using CDN
- Position tooltip based on mouse position
- How to parse data to graph in MVC
- Chart.js, set a max value
- How to create float charts with chartjs?
- vue-chartjs reactive data error