Example 6
Synopsis
In this example, we display the results of an exam over a decade. We compare the number of candidates who took the exam and the number of those who succeeded.
const took = [45, 78, 54, 60, 72, 81, 92, 86, 75, 64];
const passed = [40, 52, 39, 56, 63, 68, 75, 69, 66, 60];
const years = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019];
Chart
The chart's context is a div element named 'chart'. Set the size as you want.
<div id="chart">
</div>
We create a bar chart, set its background color and give it a title. We also place a legend at the left side of the chart and customize it.
const context = document.getElementById('chart');
const chart = new BarChart(context);
chart.backgroundColor = 'cadetblue';
chart.highlightColor = 'white';
chart.layout.title = {
text: 'Exam Results',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
};
chart.layout.legend = {
position: 'west',
textStyle: {
fontSize: 12
}
,
rectStyle: {
fill: 'white'
}
};
Data
We set the chart's data with two data series. We apply a custom style to each.
chart.data = [
{
name: 'Took',
data: took,
style: {
stroke: 'brown',
strokeWidth: 2,
fill: 'tan'
}
}
,
{
name: 'Passed',
data: passed,
style: {
stroke: 'green',
strokeWidth: 2,
fill: 'lightgreen'
}
}
];
Customize
The X-axis displays years while the Y-axis shows the number of candidates. The X-axis line is hidden. Vertical and horizontal gridlines are visible. Tick placement is automated on both axes.
chart.layout.xAxis = {
visible: false,
style: {
stroke: 'white'
},
tick: {
text: (d) => years[d],
style: {
color: 'white',
fontSize: 14,
fontWeight: 'bold'
}
},
grid: {
style: {
stroke: 'white'
}
}
};
chart.layout.yAxis = {
style: {
stroke: 'white'
},
title: {
text: 'Candidates',
style: {
color: 'white',
fontSize: 14,
fontWeight: 'bold'
}
},
tick: {
text: (d) => d.toFixed(0),
style: {
color: 'white',
fontSize: 12
}
},
grid: {
style: {
stroke: 'white',
strokeDashArray: '1 3'
}
}
};
Plot
We finally call the plot function to display the data.
chart.plot();
Putting it together
HTML
<div id="chart">
</div>
JavaScript
const took = [45, 78, 54, 60, 72, 81, 92, 86, 75, 64];
const passed = [40, 52, 39, 56, 63, 68, 75, 69, 66, 60];
const years = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019];
const context = document.getElementById('chart');
const chart = new BarChart(context);
chart.backgroundColor = 'cadetblue';
chart.highlightColor = 'white';
chart.layout.title = {
text: 'Exam Results',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
};
chart.layout.legend = {
position: 'west',
textStyle: {
fontSize: 12
}
,
rectStyle: {
fill: 'white'
}
};
chart.data = [
{
name: 'Took',
data: took,
style: {
stroke: 'brown',
strokeWidth: 2,
fill: 'tan'
}
}
,
{
name: 'Passed',
data: passed,
style: {
stroke: 'green',
strokeWidth: 2,
fill: 'lightgreen'
}
}
];
chart.layout.xAxis = {
visible: false,
style: {
stroke: 'white'
},
tick: {
text: (d) => years[d],
style: {
color: 'white',
fontSize: 14,
fontWeight: 'bold'
}
},
grid: {
style: {
stroke: 'white'
}
}
};
chart.layout.yAxis = {
style: {
stroke: 'white'
},
title: {
text: 'Candidates',
style: {
color: 'white',
fontSize: 14,
fontWeight: 'bold'
}
},
tick: {
text: (d) => d.toFixed(0),
style: {
color: 'white',
fontSize: 12
}
},
grid: {
style: {
stroke: 'white',
strokeDashArray: '1 3'
}
}
};
chart.plot();