highcharts Getting started with highcharts Hello World


Example

Begin by including highcharts.js in your index.html

<html>
  <head>
    <script src="http://code.highcharts.com/highcharts.js"></script>
  </head>

Add a <div> to contain your chart

  <body>
    <div id="chart">
      <!-- Chart goes here -->
    </div>

Specify the configuration to create the chart. The mininum configuration required to create a chart is -

  • Where does the chart go? - chart.renderTo

  • What is the data to be plotted? - There are a few ways to feed in the data to be plotted; the most common among them being the series object.

     var chartOptions = {
         chart: {
             renderTo: 'chart'  
         },
         series: [{      
             data: [1, 2]
         }]  
     };
     var chartHandle = Highcharts.Chart(chartOptions);
    

This creates a plot as follows - fiddle.

There are numerous configuration options that can be added to the chart, a few common ones being,

  • chart.type - What type of chart do you want to plot?
  • title - Configuration for the title of the chart
  • xAxis/yAxis - Configuration for the x-axis/y-axis of the chart

A complete list of all configuration options can be found here.

    <script>
    var chartOptions = {
      chart: {
        renderTo: 'chart',
        type: 'bar'
      },
      title: {
        text: 'Hello Highcharts'
      },
      xAxis: {
        categories: ['Hello', 'World']
      },
      yAxis: {
        title: 'Value'
      },
      series: [{
        name: 'Highcharts Intro',
        data: [1, 2]
      }]
    };

    var chart = new Highcharts.Chart(chartOptions);
    
    </script>
  </body>
</html>

JSFiddle Example

A good place to start in the Highcharts doc would be here.