score:10
Accepted answer
You can now use Chart.PieceLabel.js
and get labels outside the slices.s,
DEMO
angular.module("app", ["chart.js"]).controller("ChartCtrl", function($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.data = [65, 59, 80, 81, 56, 55, 40];
$scope.options = {
pieceLabel: {
render: 'label',
fontColor: '#000',
position: 'outside',
segment: true
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<script src="https://rawgit.com/beaver71/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<div ng-app="app" ng-controller="ChartCtrl">
<canvas id="pie" class="chart chart-pie"
chart-data="data" chart-labels="labels" chart-options="options">
</canvas>
</div>
Source: stackoverflow.com
Related Query
- Chart.js v2.6: Add arrows to pie chart output values
- Display values outside of pie chart in chartjs
- ChartJS version 3 how to add percentage to pie chart tooltip
- how to add percentage value to legend field in pie chart using chart.js
- how to add legend in pie chart
- Chart JS - How to output JSON objects into PIE variant
- Show values in Chart.js Pie chart parts
- Chart.js - Pie chart calculate sum of visible values after legend click
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- How add the sizes of the slices in the pie chart (at the top) in Chart.js?
- how to add Thousand separator in pie chart tooltips of charts.js
- Chart.js How to sum the values in a pie chart and display them in the header
- How to display the values inside the pie chart of PrimeNG (chart) using JavaScript or Angular
- ChartJS - How to add Text between Pie Chart and Legend
- Why do Bar Pie Chart values not line up?
- Chart js pie chart, darker shade for higher value and lighter shade for lower value. I'm displaying values monthly
- Add Extra label in a pie chart
- Chart.js - add data to line chart from clicking pie chart segment
- How to add a coloured legend box to a pie chart with Chart.js v1?
- How to add overlay color to chart.js pie chart segment?
- Change the color of displayed values in pie chart
- Dynamically update values of a chartjs chart
- How to add text inside the doughnut chart using Chart.js?
- Chart.js Show labels on Pie chart
- Chartjs random colors for each part of pie chart with data dynamically from database
- Pie Chart Legend - Chart.js
- chart.js: Show labels outside pie chart
- How set color family to pie chart in chart.js
- How to add an on click event to my Line chart using Chart.js
- line chart with {x, y} point data displays only 2 values
More Query from same tag
- Chart.js set global point size not working
- Chartjs hovering over one Chart, shows tooltip across all charts
- Ng2 charts - Animation doesn't work on line chart onInit
- Multiple Chart.js Charts in Partial Views Overwriting Each Other
- About the charts in react-native
- Chart.js is not rendered until zoom in in angular 8
- JavaScript Error - Uncaught SyntaxError: Unexpected number
- Contrast chart.js datalabels colors with the background
- Vue-chartjs with axios for stacked bar chart
- Setting default to 0 in vuechart.js HorizontalBar
- chartjs-plugin-annotation won't draw anything
- Data will not draw onto my chart
- Can't generate multi-axis combo chart (bar/line) using chart.js 2.7
- How to embed php code in min.js file
- Passing Json using JsonResult not working properly
- Changing Legend Label Position in VueChartjs
- Adding trendlines to existing chart Chart.js
- I wanna make this chart using chartjs In reactjs
- Adding custom text to Bar Chart label values using Chart.js
- Chart.js2 Radar, how to configure the label padding/spacing?
- Not render when there are too many columns
- How to change chartjs ticks orientation to 'slope right'?
- is there a way to do automatic scrolling?
- How do I customise doughnut chart using chart.js
- How to display data labels outside in pie chart with lines in ionic
- Charts.js DataIndex not updating based on selected datasets
- Chart.js Label color positioning in tooltip/legend
- Chart.js - Timeline
- How to make the background color of the chart as gradient using Chart.js
- react-rchartjs-2 Radar - dataset with less points than lables