<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="container" style="max-width: 600px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
credits:{
enabled: false
},
title: {
text: 'Browser market'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
pointPadding: 0,
groupPadding: 0.1, // khoang cach cac cot
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true, // mau tung cot
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
colors: [
'#ed4747',
'#ed8347',
'#edb547',
'#eddf47',
'#c0ed47',
'#83ed47',
'#42e578',
'#42e5c7',
'#38a8d1',
'#4437d1',
'#9b37d1',
'#d1376f',
'#d13737'
],
});
</script>
</body>
</html>
Không có nhận xét nào:
Đăng nhận xét