(For more resources related to this topic, see here.)

Creating a line chart with a time axis and two Y axes

We will now create the code for this chart:

You start the creation of your chart by implementing the constructor of your Highcharts' chart:
```
var chart = $('#myFirstChartContainer').highcharts({
});
```
We will now set the different sections inside the constructor. We start by the chart section. Since we'll be creating a line chart, we define the type element with the value line. Then, we implement the zoom feature by setting the zoomType element. You can set the value to x, y, or xy depending on which axes you want to be able to zoom.
For our chart, we will implement the possibility to zoom on the x-axis:
```
chart: {
type: 'line',
zoomType: 'x'
},
```

We define the title of our chart:

title: {
text: 'Energy consumption linked to the temperature'
},

Now, we create the x axis. We set the type to datetime because we are using time data, and we remove the title by setting the text to null. You need to set a null value in order to disable the title of the xAxis:
```
xAxis: {
type: 'datetime',
title: {
text: null
}
},
```

We then configure the Y axes. As defined, we add two Y axes with the titles Temperature and Electricity consumed (in KWh), which we override with a minimum value of 0. We set the opposite parameter to true for the second axis in order to have the second y axis on the right side:

yAxis: [
{
title: {
text: 'Temperature'
},
min:0
},
{
title: {
text: 'Energy consumed (in KWh)'
},
opposite:true,
min:0
}
],

We will now customize the tooltip section. We use the crosshairs option in order to have a line for our tooltip that we will use to follow values of both series. Then, we set the shared value to true in order to have values of both series on the same tooltip.
```
tooltip: {
crosshairs: true,
shared: true
},
```
Further, we set the series section. For the datetime axes, you can set your series section by using two different ways. You can use the first way when your data follow a regular time interval and the second way when your data don't necessarily follow a regular time interval. We will use both the ways by setting the two series with two different options. The first series follows a regular interval. For this series, we set the pointInterval parameter where we define the data interval in milliseconds. For our chart, we set an interval of one day. We set the pointStart parameter with the date of the first value. We then set the data section with our values. The tooltip section is set with the valueSuffix element, where we define the suffix to be added after the value inside our tool tip. We set our yAxis element with the axis we want to associate with our series. Because we want to set this series to the first axis, we set the value to 0(zero). For the second series, we will use the second way because our data is not necessarily following the regular intervals. But you can also use this way, even if your data follows a regular interval. We set our data by couple, where the first element represents the date and the second element represents the value. We also override the tooltip section of the second series. We then set the yAxis element with the value 1 because we want to associate this series to the second axis. For your chart, you can also set your date values with a timestamp value instead of using the JavaScript function Date.UTC.
```
series: [
{
name: 'Temperature',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2013, 0, 01),
data: [17.5, 16.2, 16.1, 16.1, 15.9, 15.8, 16.2],
tooltip: {
valueSuffix: ' °C'
},
yAxis: 0
},
{
name: 'Electricity consumption',
data: [
[Date.UTC(2013, 0, 01), 8.1],
[Date.UTC(2013, 0, 02), 6.2],
[Date.UTC(2013, 0, 03), 7.3],
[Date.UTC(2013, 0, 05), 7.1],
[Date.UTC(2013, 0, 06), 12.3],
[Date.UTC(2013, 0, 07), 10.2]
],
tooltip: {
valueSuffix: ' KWh'
},
yAxis: 1
}
]
```

You should have this as the final code:

$(function () {
var chart = $(‘#myFirstChartContainer’).highcharts({
chart: {
type: ‘line’,
zoomType: ‘x’
},
title: {
text: ‘Energy consumption linked to the temperature’
},
xAxis: {
type: ‘datetime’,
title: {
text: null
}
},
yAxis: [
{
title: {
text: ‘Temperature’
},
min:0
},
{
title: {
text: ‘Electricity consumed’
},
opposite:true,
min:0
}
],
tooltip: {
crosshairs: true,
shared: true
},
series: [
{
name: ‘Temperature’,
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2013, 0, 01),
data: [17.5, 16.2, 16.1, 16.1, 15.9, 15.8, 16.2],
tooltip: {
valueSuffix: ‘ °C’
},
yAxis: 0
},
{
name: ‘Electricity consumption’,
data: [
[Date.UTC(2013, 0, 01), 8.1],
[Date.UTC(2013, 0, 02), 6.2],
[Date.UTC(2013, 0, 03), 7.3],
[Date.UTC(2013, 0, 05), 7.1],
[Date.UTC(2013, 0, 06), 12.3],
[Date.UTC(2013, 0, 07), 10.2]
],
tooltip: {
valueSuffix: ‘ KWh’
},
yAxis: 1
}
]
});
});

You should have the expected result as shown in the following screenshot:

Summary

In this article, we learned how to perform a task with the most important features of Highcharts. We created a line chart with a time axis and two Y-axes and realized that there are a wide variety of things that you can do with it. Also, we learned about the most commonly performed tasks and most commonly used features in Highcharts.