High Charts
High Charts
The Highcharts library comes with all the tools you need to create reliable and secure data visualizations. Built on JavaScript and TypeScript, all our charting libraries work with any back-end database or server stack.
We used some 3rd party plugins while developing the Qoduby template. We have customized these plugins according to our template. You can view examples of this plugin below.
You can find the original documentation of this plugin in the info card above.
Bar Chart
Highcharts.chart('chart1', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region',
align: 'left'
},
subtitle: {
text: 'Source: Wikipedia.org',
align: 'left'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
gridLineWidth: 1,
lineWidth: 0
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
gridLineWidth: 0
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
borderRadius: '8px',
dataLabels: {
enabled: true
},
groupPadding: 0.1
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1990',
data: [631, 727, 3202, 721, 26]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 726, 31]
}, {
name: 'Year 2010',
data: [1044, 944, 4170, 735, 40]
}, {
name: 'Year 2018',
data: [1276, 1007, 4561, 746, 42]
}]
});
<div id="chart1"></div>
Line Chart
Highcharts.chart('chart2', {
title: {
text: 'U.S Solar Employment Growth',
align: 'left'
},
subtitle: {
text: 'By Job Category.',
align: 'left'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
xAxis: {
accessibility: {
rangeDescription: 'Range: 2010 to 2020'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation & Developers',
data: [43934, 48656, 65165, 81827, 112143, 142383,
171533, 165174, 155157, 161454, 154610]
}, {
name: 'Manufacturing',
data: [24916, 37941, 29742, 29851, 32490, 30282,
38121, 36885, 33726, 34243, 31050]
}, {
name: 'Sales & Distribution',
data: [11744, 30000, 16005, 19771, 20185, 24377,
32147, 30912, 29243, 29213, 25663]
}, {
name: 'Operations & Maintenance',
data: [null, null, null, null, null, null, null,
null, 11164, 11218, 10077]
}, {
name: 'Other',
data: [21908, 5548, 8105, 11248, 8989, 11816, 18274,
17300, 13053, 11906, 10073]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
<div id="chart2"></div>
Pie Chart
Highcharts.chart('chart3', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in May, 2020',
align: 'left'
},
tooltip: {
pointFormat: '{series.name}: {point.percentage:.1f}%'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 70.67,
sliced: true,
selected: true
}, {
name: 'Edge',
y: 14.77
}, {
name: 'Firefox',
y: 4.86
}, {
name: 'Safari',
y: 2.63
}, {
name: 'Internet Explorer',
y: 1.53
}, {
name: 'Opera',
y: 1.40
}, {
name: 'Sogou Explorer',
y: 0.84
}, {
name: 'QQ',
y: 0.51
}, {
name: 'Other',
y: 2.6
}]
}]
});
<div id="chart3"></div>