score:1
it seems like the width of the chart is limited to whatever the height of the div is, which for me is magically being set at about 300px by chartjs for some reason.
that's the default width of the canvas element (http://www.w3.org/tr/html5/scripting-1.html#the-canvas-element).
this means that your responsive
option is not actually doing what it's supposed to. the most likely reason is that the the wrapping element does not have a (measurable) size when the chart is being initialized. for angular, the most common reason is the wrapping (parent) elements not being in a fully rendered state when the chart is being initialized (eg. it has an ng-show
or it's a hidden tab, etc.).
css on the parent element could also be a problem - e.g. the parent elements don't have a size (but looking at your markup this seems a bit unlikely)
note - even though you don't do a chart resize on window resize, chart.js automatically does it for all charts that are configured as responsive.
score:1
function initchart() {
var canvas = document.getelementbyid('chart-canvas');
canvas.width = parent.offsetwidth;
canvas.height = parent.offsetwidth; ...
}
+css parent block {
width: 100%;
min-height: 300px;
}
hope this will helps you.
score:13
if you want to make it responsive and preserve aspect ratio, 2 things to consider:
1) in options
:
{
responsive: true,
maintainaspectratio: true,
}
2) define the aspect ratio by setting width
and height
attributes to the canvas
. in your case they're probably equal:
<canvas id="doughnut"
width="100"
height="100"
chart-data="data"
chart-labels="labels"
chart-options="maindonut"
class="chart chart-doughnut">
</canvas>
Source: stackoverflow.com
Related Query
- Chart.JS full-width, responsive doughnut chart with Bootstrap
- Responsive Chart.js Doughnut Chart with minimum height
- Chart.js HTML custom legend issues with doughnut chart
- Chart.js, dashed line, full width chart
- Chartjs doughnut chart with gradient color
- React chart : prevent chart's canvas scaling with height and width
- Why would a ChartJS chart end up with width 0 and height 0?
- Keep chart.js doughnut with fixed width and height centered in container
- Vue Chart.js Doughnut Chart with rounded and spaced arcs (vue3-chart-v2)
- Vue Chart 3 - Doughnut Charts with Text in the Middle (Trouble registering a plugin)
- Create a arc like doughnut chart with Chart js plugins
- Doughnut Chart not displaying data with Chart Js and Backbone js
- Force ChartJS to show Doughnut chart with null values
- angular-chart.js doughnut chart : How do I change width of the arc of a doughnut?
- ChartJs - Round borders on a doughnut chart with multiple datasets
- How to fit Doughnut Chart JS into Bootstrap column?
- chart.js chart distorted with fixed width
- Doughnut chart updates with twice the data
- Legend isnt moving to the right on my doughnut chart created with chart.js
- React with chart js, labelling problems in multiple datasets for doughnut chart
- Chart Js Line chart with fill on click with full information of its legend text
- In reactjs doughnut chart, How to reduce the width of the chart
- what is wrong with my code ? java script chart position
- Modify the legend of a double doughnut with chart js
- ng2-charts doughnut chart with different data per series
- How write the labels of the data inside a Doughnut Chart made with Chart.js?
- How to update css for doughnut chart with ng2-charts
- Is there a way to style multiple borders on Doughnut chart with Chart.js library?
- Trying to have Doughnut chart with dql result chartjs
- React js with react-chart js, does not render doughnut chart
More Query from same tag
- Chartjs : data labels getting overlapped in smaller datasets using chartjs-plugin-datalabels
- Chart js custom single tooltip not working
- chart.js labels text font size and digits text font size too small
- How to change legend icon on hover Chartjs
- How to remove the x-axis showing up for the bottom?
- Chart js: I'm getting the labels crossed on my pieChart and doughnut. Not able to get the chart itself
- Chart.js - How to remove percentage data labels?
- displaying bar chart in laravel
- Chart.js - cannot read property
- Getting access to already created Chart.js chart
- Emphasize a point in Chart.js
- How to use JSON data as chartjs data?
- Chart.js - Multiple JSON data object array [{x: Date, y: count}....] representing each dataset of the chart
- ChartJS custom tooltip doesn't render background on labels (only the title)
- ChartJS Update specific bar's background colour
- Full size download Chartjs canvas on mobile device
- How to set equal width between ticks - chartjs
- How to draw round edges with chart.js for line diagrams
- Chart.JS Bar Chart Throwing Error About Missing )
- Get X, Y onClick chart coordinates in ChartJS
- Using ChartJS and JSON to render charts; Appending JSON Data to javascript yields an empty object in console.log
- Trouble with setting background color for Line chart at Chartjs version 3.5.1
- Angular Chart.js, how to remove series?
- How can I display different values on xAxes than on tooltip Chart.js V3
- dynamically update the scale type of chartjs graph
- Remove Chart.js Gridline Overlap
- Difficult displaying data with linechart in chart.js
- Horizontal 'limit' line in Chart.js
- Chartjs real time graph x axis movement
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js