javascriptcanvaschartschart.jsgauge

Chartjs-gauge create circumference until certain value from data


I am creating 5 sections of gauge using chartjs-gauge. I am using the following data.

[150,200,250,300,400]

From this data, I want to display the circumference until 300. But the angle should calculated by including the last section value too. I had custom the text showing in section by setting it to empty string if more than 300. For section colour, I set 4 colours["green", "yellow", "orange", "red"]. Now, last section showing as silver colour which is default background of gauge. I have add rgba(0,0,0,0) to colour array ["green", "yellow", "orange", "red","rgba(0,0,0,0)"] which will show transparent colour for last section. But, when hover on section, it is responsive showing border. I would like to know if have other way to show the circumference until certain value from our data ,but calculating section area in chart using all value from data.

var data = [150, 200, 250, 300, 400];

var config = {
  type: "gauge",
  data: {
    labels: ['Success', 'Warning', 'Warning', 'Error'],
    datasets: [{
      data: data,
      value: 300,
      backgroundColor: ["green", "yellow", "orange", "red"],
      borderWidth: 2
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Gauge chart with datalabels plugin"
    },
    layout: {
      padding: {
        bottom: 30
      }
    },
    needle: {
      // Needle circle radius as the percentage of the chart area width
      radiusPercentage: 2,
      // Needle width as the percentage of the chart area width
      widthPercentage: 3.2,
      // Needle length as the percentage of the interval between inner radius (0%) and outer radius (100%) of the arc
      lengthPercentage: 80,
      // The color of the needle
      color: "rgba(0, 0, 0, 1)"
    },

    valueLabel: {
      formatter: Math.round
    },
    plugins: {
      datalabels: {
        display: true,
        formatter: function(value, context) {
          //return '>'+value;
          if (value <= 300) {
            return value;
          } else {
            return '';
          }

        },
        color: function(context) {
          //return context.dataset.backgroundColor;
          return 'black';
        },
        //color: 'rgba(255, 255, 255, 1.0)',
        /*backgroundColor: "rgba(0, 0, 0, 1.0)",*/
        borderWidth: 0,
        borderRadius: 5,
        font: {
          weight: "bold"
        }
      }

    }
  }
};

window.onload = function() {
  var ctx = document.getElementById("chart").getContext("2d");
  window.myGauge = new Chart(ctx, config);
};
canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en-US">
<head>
  <script src="jQuery/jquery-3.4.1.min.js"></script>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Gauge Chart with datalabels plugin</title>
  <script src="https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js"></script>
  <script src="https://unpkg.com/chartjs-gauge@0.3.0/dist/chartjs-gauge.js"></script>
  <script src="https://unpkg.com/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.js"></script>
</head>
<body>
  <div id="canvas-holder" style="width:100%">
    <canvas id="chart"></canvas>
  </div>
</body>
</html>


Solution

  • var data = [150, 200, 250, 300, 400];
    colour_array = ["#11d8ee", "#3cc457", "#f12b0e", "#dda522", "#808080"];
    let sum = data.reduce(function(a, b) {
      return a + b;
    }, 0);
    
    var perc = 0;
    perc_array = [];
    for (i = 0; i < data.length; i++) {
      perc = (data[i] / sum * 100).toFixed(2);
      perc_array.push(perc);
    }
    
    Chart.plugins.register({ //increase distance between legend and chart
      id: 'paddingBelowLegends',
      beforeInit: function(chart, options) {
        chart.legend.afterFit = function() {
          this.height = this.height + 50; //custom 50 to value you wish
        };
      }
    });
    //when want to disable this plugin in other chart, paddingBelowLegends: false in plugin{}   
    var config = {
      type: "doughnut",
      data: {
        labels: ['A', 'B', 'C', 'D', 'Others'],
        datasets: [{
          data: data,
          value: data[(colour_array.length - 1)], //300
          backgroundColor: colour_array,
          borderWidth: 2
        }]
      },
      options: {
        responsive: true,
        cutoutPercentage: 60,//thickness of chart
        title: {
          display: true,
          text: "Gauge chart with datalabels plugin"
        },
        layout: {
          padding: {
            bottom: 30
          }
        },
        valueLabel: {
          formatter: Math.round,
          display: false // hide the label in center of gauge
        },
        plugins: {
          beforeInit: function(chart, options) {
            chart.legend.afterFit = function() {
              this.height = this.height + 50;
            };
          },
          outlabels: {
            display: true,
            //text: '%l %v %p',//(label value percentage)the percentage automatically roundoff   
            //hide chart text label for last section-https://github.com/Neckster/chartjs-plugin-piechart-outlabels/issues/10#issuecomment-716606369    
            text: function(label) {
              console.log(label);
              highest_index = label['labels'].length - 1; //get highest index from the labels array
              current_index = label['dataIndex']; //current index
              value = label['dataset']['data'][label['dataIndex']]; //value of current index
              const v = parseFloat(label['percent']) * 100;
              if (current_index != highest_index) //to hide last section text label on chart.
              {
                //return value + ' , ' + `${v.toFixed(2)}%`;
                return value+',\n'+`${v.toFixed(2)}%`;
              } else {
                return false;
              }
            },
    
            color: 'white',
            stretch: 12, //length of stretching
            font: {
              resizable: true,
             minSize: 10,
             maxSize: 14
            },
            padding: {
              /*left:25,
              right: 0
              top:0,
              bottom:0*/
            }
          },
          //inner label:
          datalabels: { //label on arc section
            display: false,
            formatter: function(value, context) {
              if (value <= data[(colour_array.length - 2)]) //hide datalabel for last section
              {
                id = data.indexOf(value);
                perc = perc_array[id];
                return value + ' , ' + perc + '%';
              } else {
                return '';
              }
            },
            color: function(context) {
              return 'black';
            },
            borderWidth: 0,
            borderRadius: 10,
            font: {
              weight: "bold",
            },
            anchor: "end" //'center' (default): element center, 'start': lowest element boundary, 'end': highest element boundary
          }
        },
        legend: { //filter last section from legend chart labels
          display: true,
          //position: 'right',
          labels: {
            filter: function(legendItem, data) {
              //ori-return legendItem !=1;
              return !legendItem.text.includes('Others');
            },
            boxWidth: 20
          }
        },
        rotation: 1 * Math.PI,
        circumference: 1 * Math.PI,
        tooltips: {
          enabled: true,
          mode: 'single',
          filter: function(tooltipItem, data) { //disable display tooltip in last section
            var label = data.labels[tooltipItem.index];
            if (label == "Others") {
              return false;
            } else {
              return true;
            }
          },
          callbacks: { //custom tooltip text to show percentage amount (by default,showing real amount)
            label: function(tooltipItem, data) {
              var dataset = data.datasets[tooltipItem.datasetIndex];
              hovered_index = tooltipItem.index;
              data_length = data.datasets[0].data.length;
              var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
                return previousValue + currentValue;
              });
              var currentValue = dataset.data[tooltipItem.index];
              var percentage = (currentValue / total * 100).toFixed(2);
              return currentValue + ' , ' + percentage + "%";
            }
          }
        }
      }
    };
    
    window.onload = function() {
      var ctx = document.getElementById("chartJSContainer").getContext("2d");
      window.myGauge = new Chart(ctx, config);
    };
    <html>
    
    <head>
      <script src="https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js"></script>
      <script src="https://unpkg.com/chartjs-gauge@0.3.0/dist/chartjs-gauge.js"></script>
      <script src="https://unpkg.com/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    
    <body>
      <div id="canvas-holder" style="width:50% align:center">
        <canvas id="chartJSContainer"></canvas>
      </div>
    </body>
    
    </html>