A few Highcharts charting options. Full list of Options Reference here.
Put jQuery first
1
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
Use https in HighchartsJS CDN
More options
1
|
<script src="https://code.highcharts.com/highcharts-more.js"></script>
|
Enable exporting options
1
|
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
Enable drilldown
1
|
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
|
Enable 3D
1
|
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
|
Create a DOM
1
|
<div id="chart1" style="wdith: 80%;"></div>
|
Slightly simple way using jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(document).ready(function() {
var options = {
chart: {
type: 'bar'
},
xAxis: {
categories: [ ]
},
Series: [{
name: 'Bar1',
data: [1, 2, 3, 4]
}],
...
};
});
$('#chart1').highcharts(options);
|
Add additional series afterwards:
1
2
3
4
5
|
var chart1 = $('#chart1').highcharts(options).highcharts();
chart1.addSeries({
name: 'Bar2',
data: [5, 6, 7, 8]
});
|
Whole structure not using jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
$(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart1',
type: '',
options3d: {
enabled: true,
alpha: 45,
beta: 0
},
style: {
fontFamily: 'Times'
}
},
title: {
text: ''
},
tooltip: {
formatter: function () {
}
},
legend: {
enabled: false
},
plotOptions: {
},
credits: { enabled: false },
series: [{
name: '',
data: [ ],
color: ''
}, {
name: '',
data: [ ],
color: ''
}]
...
})
)};
|
Chart zooming
1
2
3
|
chart: {
zoomType: 'x'
}
|
To make area plot Y axis starting from minimum/set threshold (Example)
1
2
3
4
5
|
plotOptions: {
area: {
threshold: null (or a value)
}
}
|
Add multiple charts and set on and off
1
2
3
4
5
6
7
8
9
10
11
|
series [{
name: 'Column',
type: 'Column',
visible: true.
data: [],
}, {
name: 'Spline',
type: 'spline',
visible: false,
data: [],
}]
|