score:9
Accepted answer
The additional space is reserved for the legend
, which is enabled by default. Simply disable it and you should have the whole space for the chart:
legend: {
display: false
}
A working example:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
datasets: [{
data: [30, 70],
backgroundColor: [
'green',
'gray'
],
borderWidth: 0
}]
},
options: {
tooltips: {
enabled: false
},
legend: {
display: false // <- the important part
},
events: []
}
});
.wrapper {
width: 76px;
height: 76px;
border: 1px solid black; /* for demonstration purposes*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<div class="wrapper">
<canvas id="myChart" width="76" height="76"></canvas>
</div>
Source: stackoverflow.com
Related Query
- Chart.js: width and height of a pie chart not respected
- How to get the actual chart width and height in chart.js
- React chart : prevent chart's canvas scaling with height and width
- Why would a ChartJS chart end up with width 0 and height 0?
- canvas does not display proper width and height chart.js
- I can not properly re scale <canvas> with width and height attributes
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- Unable to set width and height on canvas in chart js
- attempting to change height and width of canvas for chart
- 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
- Pie chart not working using angular and ng2-charts
- angular-chart.js - chart height not working on iOS but works fine on Android and Web
- Prevent size of canvas chart js to equal window height and width
- Setting width and height
- Chart.js: bar chart first bar and last bar not displaying in full
- chartjs datalabels change font and color of text displaying inside pie chart
- Chart.js ng2-charts colors in pie chart not showing
- How to use PrimeNg Chart of Width and Height?
- Changing width and height in angular-chart.js module
- Resize the width and height of the ng2-charts
- Chartjs not rendering chart and no error thrown
- Chart.js pie chart not showing in Google Chrome canvas
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- Pie chart is not getting rendered in ChartJS
- Width and Height in Chart.js
- Changing width of chart.js chart without changing height
- Configure Pie Chart Colors Using Chart.js and PHP
- My pie chart (chartJs) does not appear
- Keep chart.js doughnut with fixed width and height centered in container
- Chart.js Date and Time Bar Chart Not Rendering - Line Works Though
More Query from same tag
- How to get multiple elements on a page using flask (tables, pie charts, etc.)
- Chart.js update() method only works once in the end instead of updating every iteration
- how to change thickness of two doughnut charts in chartjs
- how to show bar value on the top of each bar in chartjs
- Laravel Charts Refresh With Ajax
- Chart.js 2 - Axis Layer Padding
- Pie Donut chart with different sector sizes
- Plotting jqplot points to a chart.js chart
- Style X and Y Axis (tick mark) with Chart.js?
- chart.js time scatter with true scale
- How to Save as png with ChartJSRadar in R?
- Chart.js glitches and reverts to previous dataset on hover
- ChartJS Add data from string
- How to make customized stepSize for each horizontal bar in Chart.js graph
- Getting "undefined" trying to create a function
- Vue grouping items by key then charting similar keys in one chart
- chart js when hover shows old values
- chart js and json, chart not showing up
- Chart.js not showing in my view
- chart js graph not showing on canvas
- Vue.js using chart.js options not working
- export 'h' was not found in 'vue'
- I have a chart but it is not updating the chart with react chart-js-2
- ChartJS BoxWidth not working
- HTML Canvas Fill Area Under Line
- How to draw High-Precision-Numbers in chartjs
- Chart.js Bar Chart with a switch/radio button to group data / Troubleshooting bar color
- Cannot read property 'length' of undefined for ChartJS when I use it inside React
- TypeScript issue with custom plugin and afterDraw callback Chart.js and react-chartjs-2
- chart.js label with if statement