0👍
Try this:
var ctx2 = document.getElementById('chart2').getContext('2d');
var myChart2 = new Chart(ctx2, {
type:'pie',
data:{
labels:['Jan', 'Feb', 'Mar', 'Apr'],
datasets:[]
}
});
- Chartjs-ChartJS: How to return the closest x-axis label on click
- Chartjs-How to make money format in chart js in javascript
0👍
What I did in my angular application is duplicate my doughnut chart.
Give the placeholder one position: absolute; z-index: 1;
via a css class .placeholder-chart
.real-chart {
position: relative;
z-index: 2;
}
.placeholder-chart {
position: absolute;
z-index: 1;
}
Then I initialize my chart data as 100% and background color as desired:
options: {
"aspectRatio": 1.75,
"legend": {
"display": false,
},
"title": {
"display": false,
},
"rotation": - Math.PI,
"circumference": Math.PI
}
realData: {
// My real data, which result 0 in this case
}
placeholderData: {
"labels": "",
"datasets": [
{
"label": [""],
"data": [100],
"backgroundColor": "#F2EEE8"
}
]
}
My template:
<chart
class="placeholder-chart"
[type]="'doughnut'"
[data]="placeholderData"
[options]="options"></chart>
<chart
class="real-chart"
[type]="'doughnut'"
[data]="realData"
[options]="options"></chart>
In picture 1 I only get a thin yellow zero line
In picture 2 I have the 2 charts – the placeholder one above the real one
In picture 3 then the overlapped two charts
- Chartjs-ChartJS 3.7.1 tooltip callback, get label value for the next index
- Chartjs-Chartjs is graphing my values at positions 0,1,2 rather than their values along the x axis
Source:stackexchange.com