O'Reilly logo

Highcharts Cookbook by Nicholas Terwoord

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Handling dates

So far none of our charts have dealt with dates, which is critical for time-series charts. In this recipe, we'll look at some of the different ways in which Highcharts can handle and display dates.

Getting ready

To set up a basic page and install jQuery and Highcharts, refer to the Getting ready section of the Creating your first chart recipe in Chapter 1, Getting Started with Highcharts.

How to do it...

To get started, perform the following steps:

  1. Define the options as shown in the following code:
    var options = {
      title: {
        text: 'Handling Dates',
        type: 'spline'
      }
    };
  2. Set xAxis.type or yAxis.type to datetime for our chart, as shown in the following code:
    var options = {
      /* … */
      xAxis: {
        type: 'datetime'
      }
    };
  3. Create a new series for our ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required