An error occurred while loading the file. Please try again.
-
Varun Srivastava authoredbfefde0a
<!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="app"></div> <div id="html"> <div id="chart"> <ReactApexChart options={this.state.options} series={this.state.series} type="radialBar" height="350" /> </div> </div> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script> <script src="https://unpkg.com/react-apexcharts@1.1.0/dist/react-apexcharts.iife.min.js"></script> <script type="text/babel"> class RadialChart extends React.Component { constructor(props) { super(props); this.state = { options: { plotOptions: { radialBar: { offsetY: -30, startAngle: 0, endAngle: 270, hollow: { margin: 5, size: '30%', background: 'transparent', image: undefined, }, dataLabels: { name: { show: false, }, value: { show: false, } } }
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
},
colors: ['#1ab7ea', '#0084ff', '#39539E', '#0077B5'],
labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
legend: {
show: true,
floating: true,
fontSize: '16px',
position: 'left',
offsetX: 170,
offsetY: 10,
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
}
}
}]
},
series: [76, 67, 61, 90],
}
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radialBar" height="350" />
</div>
<div id="html-dist">
</div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(RadialChart), domContainer);
</script>
</body>
</html>