score:-1
maybe i don't get your question correctly, but deleting the max-width should do the trick...
score:0
you need to set .container
to have:
position: relative;
overflow: hidden;
if you want the chart to fit itself to the div
set maintainaspectratio: false
.
here's a working example:
let mychart = new chart(
document.getelementbyid('chart'), {
type: 'bar',
data: {
labels: ['a', 'b', 'c'],
datasets: [{
label: 'series1',
data: [1, 10, 6]
}]
},
options: {
maintainaspectratio: false
}
}
);
.container {
border: 1px solid #000;
overflow: hidden;
position: relative;
resize: both;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.8.0/chart.bundle.min.js"></script>
<div class="container">
<canvas id="chart"></canvas>
</div>
Source: stackoverflow.com
Related Query
- Make Chart.js canvas responsive inside the resizeable div
- How to make the size of pie chart fixed without using canvas (chart.js)
- While placing chart.js Doughnut Chart inside Primeng Carousel, the text inside the canvas seems blurred/distorted a little bit
- How to add text inside the doughnut chart using Chart.js?
- Can't make chart js responsive
- Making the labels responsive in chart js
- How to make bar chart animation where all bars grow at the same speed?
- 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
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- How to add text inside the doughnut chart using Chart.js version 3.2.1
- chart.js: How do I make the radar chart axis labels bigger?
- Chart JS, ng2-Charts - How to make the label to the right of pie chart instead on top?
- How to make the chart smaller than its container
- How do you make a progressive line chart with time as the X axis?
- How to make chartjs pie chart responsive
- How to clear/destroy Chart.js canvas when the chart is represented as a react JSX element
- show label inside the chart - angular.js and chart.js
- How to get the data attribute of the canvas chart created using chartjs
- show multiple responsive chart in the same page using chart.js
- Chart.js reduce canvas size without changing the size of the chart
- <Canvas is already in use. Chart with ID '18' must be destroyed before the canvas can be reused> in react
- vertical grid line not taking full hight of the canvas in chart js 3.3.2
- how to make scrollable the legends of pie chart ( chart js )
- How to make the background color of the chart as gradient using Chart.js
- HorizontalBar chart is displayed below canvas when I set height with style attribute for chart div (Chart.js 2.9.4)
- How to add text inside the doughnut chart using Chart.js AngularJS 2.0?
- Draw y-axis inside the graph area with chart js
- Eror: chart.min.js:13 Uncaught (in promise) Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused
- How to display the values inside the pie chart of PrimeNG (chart) using JavaScript or Angular
More Query from same tag
- using vue-chartjs in vue 3 : createElement is not a function
- ChartJS bar chart fixed width for dynamic data sets
- Laravel - How to Display both count and percentage (%) in chartjs pie chart
- Update Chart js chart dynamically in angular 2 from data getting from nodejs service
- implementing horizontal bar chart
- Change line point to triangle in Chart.js
- Chart.js - if there is not value show 0
- How to prevent first/last bars from being cut off in a chart with time scale
- Callback after line chart rendered
- How we can set our own colors for each label in charts
- Displaying dataset labels in Chart.js line graph
- Line graph - ChartJS
- Is it possible to add a javascript chart in a webview in Xamari.Forms
- Ng2-charts / chart.js - how to refresh/update chart - angular 4
- Some imports are missing in ng2-charts@3.0.8
- charts.js data doesn't fit second y-axis
- How can I get suggestedMax number for yAxes?
- how do i make ungrouped datasets with charts.js
- ChartJS Line chart cut off at the top and bottom
- Vue grouping items by key then charting similar keys in one chart
- Customize Pie Chart Legend in chart.js
- Angular charts not working with Angular 5, Showing below error attached screen shot
- Chart JS Y-axis labeling
- chart.js in mvc graph are not show
- How to use GET method to choose the right table to show ChartJS graph?
- Reactjs- Bar Graph-chartjs- Data not coming in individual blocks
- How to make the chart smaller than its container
- Need to put border on variablepie highchart?
- ChartJS not rendering after update
- Group Bar Chart Dinamic Data Update By Button Fuction ChartJS