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
- How I create a pie chart based on COUNT(php + mysql)?
- Parse HTML input value to php over javascript file
- Add Space Between Bars in Angularjs Chartjs
- Replace a Canvas Pie Chart Onclick
- Chartjs disable color change on hover withouth disabling tooltips
- Use Chartjs-Annotation-Plugin without using "import"
- impressions in google analytics is zero while sessions and users are more
- jQuery convert hex to rgba
- Chart.js Legend Customization
- Moving vertical line when hovering over the chart using chart.js
- How to create a variable for chart js datalabel plugin formatter
- Can you do regions in line charts with Chart.js?
- How can I prevent the hover data from displaying in Chart.JS?
- How to dynamically change the annotation value in Chart.js
- How do I filter & update dates using react-chartjs-2
- Display multiple chart.js charts using for loop in Django template
- How to return two lists to chartjs from Django View
- How to change X-Axis Interval on Chart.js
- Chart.js Fill color at null line and null points Tooltip
- Chartjs chart not rendering with pug template
- ChartJS right Y-Axe ticks issue
- Calculating Bar Chart Percentage
- Trouble with setting background color for Line chart at Chartjs version 3.5.1
- Chart.js 2.0.0-beta2 disable points on line Charts
- How can I display desired/particular chart in App.vue from Charts.vue which contains different charts in Vuejs
- Bar Chart With 2 Different Attribute Of The Same Variable [Chart.Js]
- How to reload a jQuery element when a button is pressed
- How do i make a new chart by pressing a button (chart.js)?
- CharJS : Is it possible to display stacked bar chart with positive scale on both sides of 0 index
- Chartjs 2.5.0 -> Labels below the chart