score:5
This is because your chart doesn't have a finite size when it's being created (i.e. when Chart(ctx).Doughnut
is being called). The chart width and height are 0 and the outerRadius
becomes -segmentStrokeWidth / 4
(this is 2
by default - hence the -0.5
)
To fix this error make sure your canvas is visible and properly sized before creating the chart. For example, if the chart is in a tab, wait for the tab to be visible before creating the chart. If it is in an expanding panel, wait for it to be completely expanded (putting it in the callback function of the animation would be the right way to go about this)
You can replicate the error by setting the canvas size to 0
<canvas id="myChart" width="0" height="0"></canvas>
What seems to be happening in your case is that clearing the browser cache delays the chart rendering so that the canvas has the right size by the time the chart is created. An easy way to verify this would be to wrap your chart creation in a setTimeout
with some delay.
Source: stackoverflow.com
Related Query
- Chart.js - IndexSizeError: Index or size is negative or greater than the allowed amount
- Chart is too big. How can I reduce size for the chart in vue js?
- How to make the chart smaller than its container
- increase the label size of a line chart in chart.js
- Chart.js reduce canvas size without changing the size of the chart
- Is there a way to give a pie chart in chart.js a different color outer border than the border color between segments?
- How does the chartjs line look start to be greater than 0
- Create bar chart with chart.js where space per bar is the same, overall chart size adjusted
- Chart.js limit the display size of the chart
- Is there any way to change the font size of labels in bar chart in Chart.js v3?
- How to increase the size of the donut or pie chart and keep the legend next to it in chart JS?
- How do I get the current step size of a chartjs chart whose stepSize I have not defined?
- charts.js chart size it's diferente than container setted size
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- Reduce size of chart within the canvas
- 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
- Getting the HTML code of a chart created by chart.js
- How to make the size of pie chart fixed without using canvas (chart.js)
- "Responsive" Chart.js chart is taller than the containing window
- How to add text inside the doughnut chart using Chart.js?
- Remove the vertical line in the chart js line chart
- Set minimum step size in chart js
- Moving vertical line when hovering over the chart using chart.js
- How do you hide the title of a chart tooltip?
- Dynamically update the options of a chart in chartjs using Javascript
- Chart.js line chart is cut off at the top?
- How can I increase the size of the pie (Chart.JS)?
- Chart.js setting maximum bar size of bar chart
- How to add text in centre of the doughnut chart using Chart.js?
- Making the labels responsive in chart js
More Query from same tag
- Chart js nested pie label colors in legend
- Custom y axle using Chart.js
- Dynamic Chart in PHP using Chart js
- Setting ticks of Chart.js in html.erb file
- Chart.js offine mode
- Puppeteer with Chart.js
- Chart Js - Limit points on graph without limiting data
- How to prevent first/last bars from being cut off in a chart with time scale
- How to parse data to graph in MVC
- JS node chart from SQL Server not updated
- How to make a chart with an associative array with chart.js?
- Why is chart.js canvas not respecting the padding of the container element?
- how to draw dotted line vertical line at 0 postiion in highChart
- Why can I not see a data value when hovering over a point on the radar chart?
- Put array in chart data
- How to pass variable (list) to JavaScript in Django?
- use ng2-charts with a loader and AfterViewInit
- Template variable injection in JS script
- chartjs xaxis ticks with round values from shifted input data
- Style a specific X-axis label with ChartJS
- how to add FAHRENHEIT symbol in chart js donut chart
- chartjs-plugin-error-bars display error-bars without displaying label on a horizontalBar chart
- Trying to get total sum based on months on ApexCharts with Php
- ng2-Chart: can we show the tooltip data of pie chart on load?
- Chart.js legendcallback
- ChartJs won't appear in DIV in same page
- Datalabels not showing on Chart.js
- Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. chat.JS
- how do I use for loop inside script tag in ejs
- How to pass a array from node to .js file (pugJs)