Charts - HighCharts

Plugin Information

Create interactive charts easily for your web projects.

Plugin Name: Highcharts
Author: Highslide Software
License: Mixed - CC NonCommercial
Website: http://www.highcharts.com/
Git Branch: highslide-software/highcharts.com/
Dependencies:
None Required
<script src="vendor/plugins/highcharts/highcharts.js"></script>

Basic Column Chart

Copy 

<div id="highchart-column" style="width: 100%; height: 250px; margin: 0 auto"></div>
Copy 

// Column Chart
var HighChartColumn = $('#highchart-column');
if (HighChartColumn.length) {

    HighChartColumn.highcharts({
        credits: false,
        colors: ['#f6bb42', '#4a89dc', '#3bafda'],
        chart: {
            backgroundColor: 'transparent',
            marginTop: 30,
            marginBottom: 30,
            type: 'column',
        },
        legend: {
            enabled: false
        },
        title: {
            text: null,
        },
        xAxis: {
            lineWidth: 0,
            tickLength: 6,
            title: {
                text: null
            },
            labels: {
                enabled: true
            }
        },
        yAxis: {
            max: 20,
            lineWidth: 0,
            gridLineWidth: 0,
            lineColor: '#EEE',
            gridLineColor: '#EEE',
            title: {
                text: null
            },
            labels: {
                enabled: false,
                style: {
                    fontWeight: '400'
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                colorByPoint: true,
            }
        },
        series: [{
            name: 'Tokyo',
            data: [12, 14, 20, 19, 8, 12,
                14, 20, 5, 16, 8, 12,
                14, 20, 19, 5, 16, 8,
                12, 14, 20, 19, 5, 16,
                8
            ]
        }]
    });
}

Basic Bar Chart

Copy 

<div id="highchart-bar" style="width: 100%; height: 250px; margin: 0 auto"></div>
Copy 

// Bar Chart
var HighChartBar = $('#highchart-bar');      
if (HighChartBar.length) {

  HighChartBar.highcharts({
      credits: false,
      colors: ['#f6bb42', '#4a89dc', '#3bafda'],
      chart: {
          type: 'bar',
          backgroundColor: 'transparent',
      },
      legend: {
          enabled: false,
          verticalAlign: 'top',
          y: -5,
      },
      title: {
          text: null
      },
      xAxis: {
          showEmpty: false,
          tickLength: 80,
          lineColor: '#EEE',
          tickColor: '#EEE',
          offset: 1,
          categories: ['TV', 'Radio'],
          title: {
              text: null
          },
          labels: {
              align: 'right',
          }
      },
      yAxis: {
          min: 0,
          gridLineWidth: 0,
          showEmpty: false,
      },
      tooltip: {
          valueSuffix: ' Million Viewers'
      },
      series: [{
          name: 'Children',
          data: [100, 100]
      }, {
          name: 'Women',
          data: [36, 55]
      }, {
          name: 'Men',
          data: [65, 45]
      }]
  });
}

Basic Line Chart

Copy 

<div id="highchart-line" style="width: 100%; height: 250px; margin: 0 auto"></div>
Copy 

// Line Chart
var HighChartLine = $('#highchart-line');
if (HighChartLine.length) {

    HighChartLine.highcharts({
        credits: false,
        colors: ['#f6bb42', '#4a89dc', '#3bafda'],
        chart: {
            type: 'line',
            backgroundColor: 'transparent',
        },
        title: {
            text: null
        },
        xAxis: {
            gridLineColor: '#EEE',
            lineColor: '#EEE',
            tickColor: '#EEE',
        },
        yAxis: {
            gridLineColor: '#EEE',
            title: {
                text: null,
            }
        },
        legend: {
            enabled: false,
        },
        series: [{
            name: 'Yahoo',
            data: [7.0, 6, 9, 14, 18, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'CNN',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]
    });
}

Basic Area Chart

Copy 

<div id="highchart-area" style="width: 100%; height: 250px; margin: 0 auto"></div>
Copy 

// Area Chart
var HighChartArea = $('#highchart-area');
if (HighChartArea.length) {

    HighChartArea.highcharts({
        credits: false,
        colors: ['#f6bb42', '#4a89dc', '#3bafda'],
        chart: {
            type: 'areaspline',
            backgroundColor: 'transparent',
        },
        title: {
            text: null
        },
        legend: {
            enabled: false
        },
        xAxis: {
            allowDecimals: false,
            tickColor: '#EEE',
        },
        yAxis: {
            title: {
                text: null
            },
            gridLineColor: 'transparent',
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 0.25,
            }
        },
        series: [{
            name: 'USA',
            data: [150, 220, 160, 100, 150,200, 240]
        }, {
            name: 'Russia',
            data: [10, 20, 40, 120, 240, 180, 160]
        }]
    });
}

Basic Pie Chart

Copy 

<div id="highchart-pie" style="width: 100%; height: 250px; margin: 0 auto"></div>
Copy 

// Pie Chart
var HighChartPie = $('#highchart-pie');
if (HighChartPie.length) {

    HighChartPie.highcharts({
        credits: false, // Disable HighCharts logo
        colors: ['#f6bb42', '#4a89dc', '#3bafda'], // Set Colors
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: null
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                center: ['30%', '50%'],
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        legend: {
            x: 90,
            floating: true,
            verticalAlign: "middle",
            layout: "vertical",
            itemMarginTop: 10
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox', 35.0],
                ['IE', 36.8],
                {
                  name: 'Chrome',
                  y: 15.8,
                  sliced: true,
                  selected: true
                }
            ]
        }]
    });
}

Extended Information

For more detailed documentation you should refer to the plugins original documentation. Several additional resources have been listed below which contain further useful information.

Documentation: http://api.highcharts.com/highcharts
Advanced Examples: http://www.highcharts.com/demo
Return to Top