CODEWITHSUNDEEP
javascripthtmlchart.js
flyingduck92
flyingduck92

Reputation: 1644

ChartJS - How to add Text between Pie Chart and Legend

Hello guys I would like to know how to add percentage like image below. I want to add text which contain the percentage of each data. It's gonna be between pie-chart and legend. How to add the text or maybe change the style of legend by adding text on the above of legends.

enter image description here

What I've done so far

enter image description here

HTML

<div class="block__chart">
  <div id="counter"></div>
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>

CSS

* {
  padding: 0;
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

.block__chart {
  width: 100%;
  background-color: #eee;

  padding: 2em;
  display: flex;
  flex-direction: column;
}

#myChart {
  width: 100%;
  margin: 1em 0;
}

canvas {
  width: 452px;
}

#counter {
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  color: #007cbd;

  p {
    color: black;
    font-weight: 400;
  }
}
.activeUser {
  font-size: 20px;
}
.lastFiveMins {
  font-size: 10px;
}

JS

// Fake Data - Total 46946
var dataset = [
  { label: "Mobile", count: 18778, color: "#72bbe1" },
  { label: "Desktop", count: 28168, color: "#3ea6dd" }
];
var dataTotal = dataset.reduce((acc, data) => (acc += data.count), 0);

var counter = document.getElementById("counter");
counter.innerHTML = `
  ${dataTotal} 
  <p class="activeUser">ACTIVE USER</p>
  <p class="lastFiveMins">IN THE LAST 5 MINUTES</p>`;

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: "pie",
  data: {
    labels: [dataset[0].label.toUpperCase(), dataset[1].label.toUpperCase()],
    datasets: [
      {
        data: [dataset[0].count, dataset[1].count],
        backgroundColor: [dataset[0].color, dataset[1].color],
        borderWidth: 1
      }
    ]
  },
  options: {
    tooltips: {
      callbacks: {
        label: function (tooltipItem, data) {
          let allData = data.datasets[tooltipItem.datasetIndex].data;
          let sumData = allData.reduce((memo, data) => (memo += data), 0);

          let tooltipLabel = data.labels[tooltipItem.index];
          let tooltipData = allData[tooltipItem.index];
          let tooltipPercentageCalc = (tooltipData / sumData) * 100;
          let tooltipPercentage = `${tooltipPercentageCalc.toFixed(1)}%`;

          return `${tooltipLabel} : ${tooltipData} (${tooltipPercentage})`;
        }
      }
    },
    legend: {
      display: true,
      labels: {
        usePointStyle: true,
        text: "Hello World",
        fontColor: "black",
        fontSize: 15
      },
      position: "bottom"
    }
  }
});

Upvotes: 0

Views: 1365

Answers (1)

haley
haley

Reputation: 36

you can use filter options for customizing your labels

example down below


  legend: {
      display: true,
      labels: {
        usePointStyle: true,
        text: "Hello World",
        fontColor: "black",
        fontSize: 15,
        filter: function(legendItem, data) {
                let labels = data.labels, datasets = data.datasets[0].data;
                for(let i=0;i<labels.length;i++){
                if(labels[i].indexOf(legendItem.text)!=-1){
                let t = legendItem.text;
                legendItem.text = t+' : '+datasets[i] + '%';
                break;
                }
            }
            return legendItem;
            },

      },
      position: "bottom"
    }

Upvotes: 2

Related Questions