Example 4
Synopsis
This example illustrates daily temperature gaps over a week. The highest and lowest temperatures are displayed.
const high = [25, 27, 28, 25, 24, 24, 23];
const low = [17, 16, 17, 15, 16, 17, 15];
const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
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 set the highlight color and place a legend at the right side of the chart.
const context = document.getElementById('chart');
const chart = new BarChart(context);
chart.backgroundColor = 'purple';
chart.highlightColor = 'gray';
chart.layout.title = {
text: 'Temperature Gap',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
};
chart.layout.legend = {
position: 'east',
textStyle: {
fontSize: 12
}
,
rectStyle: {
fill: 'white'
}
};
Data
We set the chart's data with two data series.
chart.data = [
{
name: 'Highest',
data: high,
style: {
stroke: 'red',
strokeWidth: 2,
fill: 'orangered'
}
}
,
{
name: 'Lowest',
data: low,
style: {
stroke: 'blue',
strokeWidth: 2,
fill: 'lightblue'
}
}
];
Customize
The X-axis shows week days. Axis lines and horizontal gridlines are hidden. Tick placement is automated on the vertical axis and fixed on the horizontal axis (all ticks are displayed no matter the chart's size).
chart.layout.xAxis = {
visible: false,
tick: {
placement: 'custom',
nbTicks: days.length,
text: (d) => days[d],
style: {
color: 'white',
fontSize: 14
}
},
grid: {
style: {
stroke: 'white'
}
}
};
chart.layout.yAxis = {
visible: false,
title: {
text: 'Temperature (°C)',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
},
tick: {
text: (d) => d.toFixed(0),
style: {
color: 'white',
fontSize: 12
}
},
grid: {
visible: false
}
};
Plot
We finally call the plot function to display the data.
chart.plot();
Putting it together
HTML
<div id="chart">
</div>
JavaScript
const high = [25, 27, 28, 25, 24, 24, 23];
const low = [17, 16, 17, 15, 16, 17, 15];
const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const context = document.getElementById('chart');
const chart = new BarChart(context);
chart.backgroundColor = 'purple';
chart.highlightColor = 'gray';
chart.layout.title = {
text: 'Temperature Gap',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
};
chart.layout.legend = {
position: 'east',
textStyle: {
fontSize: 12
}
,
rectStyle: {
fill: 'white'
}
};
chart.data = [
{
name: 'Highest',
data: high,
style: {
stroke: 'red',
strokeWidth: 2,
fill: 'orangered'
}
}
,
{
name: 'Lowest',
data: low,
style: {
stroke: 'blue',
strokeWidth: 2,
fill: 'lightblue'
}
}
];
chart.layout.xAxis = {
visible: false,
tick: {
placement: 'custom',
nbTicks: days.length,
text: (d) => days[d],
style: {
color: 'white',
fontSize: 14
}
},
grid: {
style: {
stroke: 'white'
}
}
};
chart.layout.yAxis = {
visible: false,
title: {
text: 'Temperature (°C)',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
},
tick: {
text: (d) => d.toFixed(0),
style: {
color: 'white',
fontSize: 12
}
},
grid: {
visible: false
}
};
chart.plot();