Example 6
Synopsis
In this example, we plot temperature measures over a week. The Y-axis displays integer values. The X-axis shows abbreviated day names. Both axes have a title.
const temperatures = [25, 27, 22, 18, 16, 19, 22];
const days = [1, 2, 3, 4, 5, 6, 7];
Chart
The chart's context is a div element named 'chart'. Set the size as you want.
<div id="chart">
</div>
We create a line chart, give it a title and set its background color.
const context = document.getElementById('chart');
const chart = new LineChart(context);
chart.backgroundColor = '#464849';
chart.layout.title = {
text: 'Week Temperatures',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
}
Data
We create and style a data series. Then we set the chart's data.
const ds = {
data: temperatures,
style: {
stroke: 'white',
strokeWidth: 3
}
};
chart.data = {
x: days,
y: [ds]
};
Customize
The X-axis is set to show short day names. The Y-axis shows temperatures with no decimal places. We give both axes a title and display all components in white. We also style the zooming area.
const ShortDayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
chart.layout.xAxis = {
visible: false,
title: {
text: 'Day of Week',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
},
grid: {
style: {
stroke: 'white',
strokeDashArray: '1 5'
}
},
tick: {
text: (val) => ShortDayNames[val - 1],
style: {
color: 'white',
fontSize: 14,
fontWeight: 'bold'
}
},
spy: {
lineStyle: {
stroke: 'white'
},
rectStyle: {
cornerRadius: 1,
fill: 'white',
stroke: 'white'
},
textStyle: {
color: 'black'
}
}
};
chart.layout.yAxis = {
visible: false,
title: {
text: 'Temperature (°C)',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
},
grid: {
style: {
stroke: 'white',
strokeDashArray: '1 5'
}
},
tick: {
text: (val) => val.toFixed(0),
style: {
color: 'white',
fontSize: 16
}
},
spy: {
lineStyle: {
stroke: 'white'
},
rectStyle: {
cornerRadius: 1,
fill: 'white',
stroke: 'white'
},
textStyle: {
color: 'black'
}
}
};
chart.interactivity.zoomRect = {
stroke: 'darkgreen',
strokeWidth: 2,
strokeDashArray: 'none',
fill: 'green'
};
Plot
We finally call the plot function to display the data.
chart.plot();
Putting it together
HTML
<div id="chart">
</div>
JavaScript
const temperatures = [25, 27, 22, 18, 16, 19, 22];
const days = [1, 2, 3, 4, 5, 6, 7];
const context = document.getElementById('chart');
const chart = new LineChart(context);
chart.backgroundColor = '#464849';
chart.layout.title = {
text: 'Week Temperatures',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
}
const ds = {
data: temperatures,
style: {
stroke: 'white',
strokeWidth: 3
}
};
chart.data = {
x: days,
y: [ds]
};
const ShortDayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
chart.layout.xAxis = {
visible: false,
title: {
text: 'Day of Week',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
},
grid: {
style: {
stroke: 'white',
strokeDashArray: '1 5'
}
},
tick: {
text: (val) => ShortDayNames[val - 1],
style: {
color: 'white',
fontSize: 14,
fontWeight: 'bold'
}
},
spy: {
lineStyle: {
stroke: 'white'
},
rectStyle: {
cornerRadius: 1,
fill: 'white',
stroke: 'white'
},
textStyle: {
color: 'black'
}
}
};
chart.layout.yAxis = {
visible: false,
title: {
text: 'Temperature (°C)',
style: {
color: 'white',
fontSize: 16,
fontWeight: 'bold'
}
},
grid: {
style: {
stroke: 'white',
strokeDashArray: '1 5'
}
},
tick: {
text: (val) => val.toFixed(0),
style: {
color: 'white',
fontSize: 16
}
},
spy: {
lineStyle: {
stroke: 'white'
},
rectStyle: {
cornerRadius: 1,
fill: 'white',
stroke: 'white'
},
textStyle: {
color: 'black'
}
}
};
chart.interactivity.zoomRect = {
stroke: 'darkgreen',
strokeWidth: 2,
strokeDashArray: 'none',
fill: 'green'
};
chart.plot();