0
609
ViewsHow to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
I am drawing polar chart with chart.js ^2.8.0 and ng2-charts ^2.3.0 in Angular. I have used chartjs-plugin-datalabels to display labels but this does not support lables outside at fixed positions outside the polar chart rings like this plugin for chart.js display labels outside the pie chart.
CODE:
myColors = [{ backgroundColor: ["rgb(203, 75, 75, 0.5)", "rgb(237, 194, 64, 0.5)", "rgb(175, 216, 248, 0.5)"] }];
ChartPlugins = [pluginDataLabels];
polarAreaChartOptions: ChartOptions = {
plugins: {
datalabels: {
color: '#000000',
anchor: 'end',
align: 'end',
padding: 50,
display: true,
font: {
weight: 'bolder'
},
formatter: function(value, ctx) {
return `${ctx.chart.data.labels[ctx.dataIndex]} - ${value} %`;
},
},
},
scale: {
ticks: {
beginAtZero: true,
max: 100,
min: 0,
stepSize: 10
},
gridLines: {
color: ['gray', 'gray', 'gray', 'gray', 'red','gray', 'gray', 'gray', 'gray', 'gray'],
lineWidth: [1, 1, 1, 1, 3, 1, 1, 1, 1, 1]
}
}
};
polarAreaChartType: ChartType = "polarArea";
Markup
<canvas id="polar-chart" baseChart height="40vh" width="120vw"
[data]="polarAreaChartData"
[labels]="polarAreaChartLabels"
[legend]="polarAreaLegend"
[plugins]="ChartPlugins"
[options]="polarAreaChartOptions"
[chartType]="polarAreaChartType"
[colors]="myColors">
</canvas>
Is there any plugin or addon to display the labels outside the rings in polar chart.js and ng2-charts ?
·
Juan Pablo Isaza
1 answers
Answer question0
If you update to chart.js V3 you can use the build in pointLabels and center them:
const options = {
type: 'polarArea',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}]
},
options: {
scales: {
r: {
pointLabels: {
display: true,
centerPointLabels: true
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>
·
Juan Pablo Isaza
Report
Answer question