score:1
Accepted answer
this seems to happen because chart.js does not like the small amount of margin, if you increase it it works fine or if you put a surrounding div around it and put the margin on that it also seems to work fine:
var initdata = {
type: "polararea",
data: {
labels: ['a', 'b'],
datasets: [{
data: [2, 4]
}]
},
options: {
plugins: {},
responsive: true,
maintainaspectratio: false,
scales: {
r: {}
}
}
};
var context = document.getelementbyid('test').getcontext('2d');
var chart = new chart(context, initdata);
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<div>
<div style="margin: 0.5em;">
<canvas style="width: 100%; height: 20em;" id="test"></canvas>
</div>
</div>
edit:
i was not totally correct with the larger size of margin fixes it, it so happend to just be a correct number.
chart.js does need a dedicated container around the chart for the margin to function properly as described in the docs here
Source: stackoverflow.com
Related Query
- ChartJs in endless loop
- Loop Dataset ChartJS Javascript
- How to add ChartJS code in Html2Pdf to view image
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs not working with d3 from csv source
- how to use chartjs graph in a *ngFor loop
- ChartJS have xAxes labels match data source
- Updating Chartjs to 2.5 with custom code
- Calling data from outside of Chartjs code
- VueJS + Chartjs - Chart only renders after code change
- ChartJS 2.0 differences in code help needed
- Chartjs render only the last in loop (ionic)
- My Chartjs is not updating after setstate full code attached Reactjs Update
- Chartjs doc examples are lightning fast but same code is slow when reproducing
- 'require is not defined' error when attempting to use chartjs in javascript code
- How to run Chart.js samples using source code
- Chartjs - Loop thru dataset and assign colors
- Loop to create lines for graph chartjs
- Code for Chartjs Typescript definition file
- Dynamically update values of a chartjs chart
- Different color for each bar in a bar chart; ChartJS
- Hide points in ChartJS LineGraph
- ChartJS Line Charts - remove color underneath lines
- Skip decimal points on y-axis in chartJS
- How to set ChartJS Y axis title?
- Chartjs Bar Chart showing old data when hovering
- Chartjs change grid line color
- Chart area background color chartjs
- Custom Legend with ChartJS v2.0
- Chartjs Tooltip Line Breaks
More Query from same tag
- ChartJs how to get from mulitiple dateset which dataset bar is clicked
- Angular-Charts bar chart does not update when I change the data, series, labels
- automatic legend translation on chart.js
- ChartJS: How to center monthly bars against a daily line chart?
- Chart.js - cannot fetch result from MySQL via PHP
- How can I sort, insert in between and update full dataset in chartjs?
- Extending Existing Chart Types angular chart js using chart js 2.0
- Mixed chart not showing both charts simultaneously chart.js
- Chart.JS Mixed Chart - Bars Not Showing
- Chart.js bar thickness
- How to add OnClick Event on labels in Chart.js v2.0?
- Chart.js charts not rendering data until I inspect element, is it because of async?
- How to set vue3-chartjs fixed height?
- increase the gap between y-axis and first x-axis value chart.js
- not able to set dataset value in chart.js
- angular 5 chart.js Failed to create chart
- Correlating separate elements with different heights to line up along vertical center line
- ChartJs - Doughnut Chart - how to remove labels if percentage is less than a limit
- Passing data from Python to JavaScript to plot Chart.js
- Syntax to instantiate chart.js chart
- How to display data on hover inside doughnut chart in Angular Chart?
- Labels attribute of chartsjs not taking context variable of type string
- Bootstrap grid not working with canvas
- chart.js 3 stacked bar chart - tooltip showing for zero values
- Vertical line using Chart.js annotations plugin with linear scale on x axis
- Show base64 image next to canvas with charts.js
- Why am I getting "plot.new has not been called yet" calling legend() after chartJSRadar()
- PHP render stacked area chart of JSON dataset
- Chart js straight line (v1 vs v2)
- Chart.js How to invert (swap) axes?