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>Stroked Gauge</title> <link href="../../assets/styles.css" rel="stylesheet" /> <style> #chart { max-width: 650px; margin: 35px auto; } </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: { startAngle: -135, endAngle: 135, dataLabels: { name: { fontSize: '16px', color: undefined, offsetY: 120 }, value: { offsetY: 76, fontSize: '22px', color: undefined, formatter: function (val) { return val + "%"; } } } } }, fill: { type: 'gradient', gradient: { shade: 'dark',
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
shadeIntensity: 0.15,
inverseColors: false,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 65, 91]
},
},
stroke: {
dashArray: 4
},
labels: ['Median Ratio']
},
series: [67],
}
}
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>