Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67497

Create star rating guage chart using jquery

$
0
0

enter image description here

I want to create chart as above. I ahve tried multiple ways to do but couldn't get any correct one. Some sample code i'm showing below:

HTML code:

<canvas class='chartjs-gauge'></canvas>

JS CODE:

var config6 = {
  type:"doughnut",
  data: {
    labels : ["Positive","Negative"],
    datasets: [{
        label: "Gauge",
        data : [190, 10],
        backgroundColor: [ "green","red" ]
    }]
  },
  options: {
    circumference: Math.PI,
    rotation : Math.PI,
    cutoutPercentage : 40, // precent
    plugins: {
        datalabels: {
            backgroundColor: 'rgba(0, 0, 0, 0.7)',
            borderColor: '#ffffff',
            color: function(context) {
                return context.dataset.backgroundColor;
            },
            font: function(context) {
                var w = context.chart.width;
                return {
                    size: w < 512 ? 18 : 20
                }
            },
            align: 'start',
            anchor: 'start',
            offset: 10,
            borderRadius: 4,
            borderWidth: 1,
            formatter: function(value, context) {
                var i = context.dataIndex;
                var len = context.dataset.data.length - 1;
                if(i == len){
                    return null;
                }
                return value+' mph';
            }
        }
    },
    legend: {
        display: true
    },
    tooltips: {
        enabled: true
    }
  }
};

But it is only showing chart as below:

enter image description here

Anybody know how to do it?


Viewing all articles
Browse latest Browse all 67497

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>