0
607
VisualizaçõesHow 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 Respostas
Responde à pergunta0
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
Relatório
Responde à pergunta