0

I am in the development of some graphs with the help of the Chart.js library and among them I am making use of a pie chart or better known with Pie Chart and I am looking for some way to add their respective percentages on the graph as well as the image that I add as an example at the end of the snippet.

Currently the graph is shown but I cannot show their respective percentages.

const pieData = [
    {
        value: 72,
        color: "#4EADEB",
       // highlight: "#FF5A5E",
        label: "Avance"
    },
    {
        value: 28,
        color: "#3F86CB",
        //highlight: "#5AD3D1",
        label: "Pendiente"
    }
];

const pieOptions = {
    //Boolean - Whether we should show a stroke on each segment
    segmentShowStroke: true,   

    //String - The colour of each segment stroke
    segmentStrokeColor: "#fff",

    //Number - The width of each segment stroke
    segmentStrokeWidth: 2,

    //Number - The percentage of the chart that we cut out of the middle
    percentageInnerCutout: 0, // This is 0 for Pie charts

    //Number - Amount of animation steps
    animationSteps: 100,

    //String - Animation easing effect
    animationEasing: "easeOutBounce",

    //Boolean - Whether we animate the rotation of the Doughnut
    animateRotate: true,

    //Boolean - Whether we animate scaling the Doughnut from the centre
    animateScale: false,

    //String - A legend template
    legendTemplate:
        '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
};

const pieCtx = document.getElementById("myPieGraph").getContext("2d");
const myPieChart = new Chart(pieCtx).Pie(pieData, pieOptions);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<canvas id="myPieGraph" height="120" width="240"></canvas>

Example Image:

enter image description here

Note:

Before the question closes for possible duplication, in this question it seeks to add the percentages but the version they use here is 0.4.0, the version that I am using of ChartJS is 1.1.1.

The use of its properties are different.

  • Does this answer your question? [ChartJS: datalabels: show percentage value in Pie piece](https://stackoverflow.com/questions/52044013/chartjs-datalabels-show-percentage-value-in-pie-piece) – Phaelax z Aug 11 '21 at 14:57
  • @Phaelaxz The version of ChartJS that you use in this question is 2.7.2 and the one that I use is 1.1.1, the use of its properties are different –  Aug 11 '21 at 15:02
  • looking through the docs quicly it doesnt seem like there is an easy way to do this except for calculating all the arcs yourself to know where to put the percentages, you are better off just updating chart.js and using the datalabels plugin since the version you are using is 5 years old and is verry outdated – LeeLenalee Aug 11 '21 at 15:34
  • @LeeLenalee I thought about changing the version of ChartJS for a more recent one but right now it is impossible to do it since the development contains more than 30 graphs with that version ChartJS 1.1.1 and that would imply a lot of time changing each graph to the most recent version, that is why this same version is still used –  Aug 11 '21 at 15:37
  • I understand your reluctance to update, it's not always simple to do in some environments. But I fear the functionality you want will require alterations to the plugin and thus you're still back at having to do regression testing anyway. – Phaelax z Aug 11 '21 at 17:01
  • @Phaelaxz I will wait for someone to come up with an idea to solve my problem, otherwise I will migrate to one of the most recent versions –  Aug 11 '21 at 17:09
  • @user11804298 gave it another look, chart.js v1 was never made to draw custom things on the canvas so you can draw something on top of the chart at the start every time chart.js does any rerendering you will need to detect that somehow to redraw your values, guess that this will cost you more time as migrating to a newer version, also since the version is soo old the chance someone has a good solution for this is small – LeeLenalee Aug 11 '21 at 17:13

0 Answers0