<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
</div>
</div>
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
verticalAlign: 'middle',
floating: true,
text: '70% <br> 750K <br> Total',
},
plotOptions: {
pie: {
innerSize: '100%'
},
series: {
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1
}
}
}
},
series: [{
borderWidth: 0,
name: 'Subscribers',
data: [{
y: 30,
name: "Online",
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#4679F8'],
[1, '#57B2A5']
]
},
},
{
y: 20,
name: "Offline",
color: "#DDF4E4",
}
],
size: '100%',
innerSize: '75%',
showInLegend: false,
dataLabels: {
enabled: false
}
}, {
size: '65%',
innerSize: '95%',
dataLabels: {
enabled: false
},
data: [{
y: 30
}, {
y: 20,
color: 'rgba(0,0,0,0)'
}]
}],
credits: {
enabled: false
}
});
