Example 1
Synopsis
In this example, we show the number of cars (in thousands) produced from 3 factories over a year. Month names are abbreviated. The chart and both axes have a title. We hide axis lines.
const factoryA = [10, 15, 20, 17, 22, 20, 18, 15, 19, 26, 24, 20];
const factoryB = [5, 10, 25, 15, 10, 19, 25, 30, 24, 20, 28, 40];
const factoryC = [20, 25, 10, 18, 25, 30, 22, 17, 20, 24, 16, 12];
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 and give it a styled title. We also add a legend at the bottom of the chart and customize it. Finally we round the corners of the chart's tooltip.
const context = document.getElementById('chart');
const chart = new BarChart(context);
chart.layout.title = {
text: 'Car Production',
style: {
fontSize: 16,
fontWeight: 'bold'
}
};
chart.layout.legend = {
position: 'south',
textStyle: {
fontFamily: 'cursive',
color: 'brown',
fontSize: 12
}
,
rectStyle: {
stroke: 'brown',
strokeWidth: 2,
fill: 'white',
cornerRadius: 5
}
};
chart.layout.tooltip.rectStyle.cornerRadius = 5;
Data
We set the chart's data with three data series. We apply a custom style to each.
chart.data = [
{
name: 'Factory A',
data: factoryA,
style: {
stroke: 'red',
strokeWidth: 1,
fill: 'lightcoral',
cornerRadius: 5
}
}
,
{
name: 'Factory B',
data: factoryB,
style: {
stroke: 'blue',
strokeWidth: 1,
fill: 'lightblue',
strokeDashArray: '2 2'
}
}
,
{
name: 'Factory C',
data: factoryC,
style: {
stroke: 'green',
strokeWidth: 1,
fill: 'lightgreen'
}
}
];
Customize
The X-axis is set to display months names in abbreviated format. The Y-axis shows the number of cars produced. Both axes have a title. Axis lines are hidden. Only 4 ticks appear on the vertical axes.
const ShortMonthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
chart.layout.xAxis = {
visible: false,
title: {
text: 'Month'
},
tick: {
text: (d) => ShortMonthNames[d]
}
};
chart.layout.yAxis = {
visible: false,
title: {
text: 'Cars (Thousands)'
},
tick: {
placement: 'custom',
nbTicks: 4,
text: (d) => d.toFixed(0)
}
};
Plot
We finally call the plot function to display the data.
chart.plot();
Putting it together
HTML
<div id="chart">
</div>
JavaScript
const factoryA = [10, 15, 20, 17, 22, 20, 18, 15, 19, 26, 24, 20];
const factoryB = [5, 10, 25, 15, 10, 19, 25, 30, 24, 20, 28, 40];
const factoryC = [20, 25, 10, 18, 25, 30, 22, 17, 20, 24, 16, 12];
const context = document.getElementById('chart');
const chart = new BarChart(context);
chart.layout.title = {
text: 'Car Production',
style: {
fontSize: 16,
fontWeight: 'bold'
}
};
chart.layout.legend = {
position: 'south',
textStyle: {
fontFamily: 'cursive',
color: 'brown',
fontSize: 12
}
,
rectStyle: {
stroke: 'brown',
strokeWidth: 2,
fill: 'white',
cornerRadius: 5
}
};
chart.layout.tooltip.rectStyle.cornerRadius = 5;
chart.data = [
{
name: 'Factory A',
data: factoryA,
style: {
stroke: 'red',
strokeWidth: 1,
fill: 'lightcoral',
cornerRadius: 5
}
}
,
{
name: 'Factory B',
data: factoryB,
style: {
stroke: 'blue',
strokeWidth: 1,
fill: 'lightblue',
strokeDashArray: '2 2'
}
}
,
{
name: 'Factory C',
data: factoryC,
style: {
stroke: 'green',
strokeWidth: 1,
fill: 'lightgreen'
}
}
];
const ShortMonthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
chart.layout.xAxis = {
visible: false,
title: {
text: 'Month'
},
tick: {
text: (d) => ShortMonthNames[d]
}
};
chart.layout.yAxis = {
visible: false,
title: {
text: 'Cars (Thousands)'
},
tick: {
placement: 'custom',
nbTicks: 4,
text: (d) => d.toFixed(0)
}
};
chart.plot();