An error occurred while loading the file. Please try again.
-
Rushikesh Padsala authored27ca663e
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Circle Custom Angle</title> <link href="../../assets/styles.css" rel="stylesheet" /> <style> #chart { max-width: 650px; margin: 35px auto; } .apexcharts-legend text { font-weight: 900; } </style></head><body> <div id="chart"> </div> <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script> <script> var options = { chart: { height: 350, type: 'radialBar', }, plotOptions: { radialBar: { offsetY: -30, startAngle: 0, endAngle: 270, hollow: { margin: 5, size: '30%', background: 'transparent', image: undefined, }, dataLabels: { name: { show: false, }, value: { show: false, } } } }, colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'], series: [76,67,61,90], labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'], legend: { show: true, floating: true, fontSize: '16px', position: 'left', offsetX: 170, offsetY: 10,
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
labels: {
useSeriesColors: true,
},
markers: {
size: 0
},
formatter: function(seriesName, opts) {
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex]
},
itemMargin: {
horizontal: 1,
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
show: false
}
}
}]
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>