Highcharts - SPLessons

Highcharts Options

Chapter 4

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Highcharts Options

Highcharts Options

shape Introduction

Highcharts is a JavaScript-based library that lets you to create beautiful, and high quality web-based charting with minimal coding. Users can create professional and attractive charts with different options for a web application or website using Highcharts.

This chapter explains about the most important Highcharts Options:

  • Zooming
  • Plot bands and plot lines

Zooming

shape Description

Zooming in Highcharts can be done either on X or Y-axis independently. The option chart.zoomType  is set to either ‘x, y or xy’.

On touch gadgets, the client can zoom by pinching in the graph region. On these gadgets, the client can move the zoomed territory by panning with one finger over the chart. Whereas for a mouse pointer, the zooming is done by dragging out a rectangle in the chart. Unlike pinch zooming, the client can’t dish the zoomed zone, yet needs to zoom out in again on another range.

Plot bands and plot lines

shape Description

Plot lines and plot bands are entirely comparable being used. They both have the alternative of id, color, label, event and zIndex. The lines and bands will dependably be opposite to the hub characterized inside. At the point when a plot band/line is utilized on both x and y axis, the plot band/line on the y-axis will appear in front.

Following are a few examples where the Plot Bands and Plot Lines charts are represented in Highcharts Options:

Spline with plot bands

shape Description

Users can mention the plot band range for the given data set by using the property called yAxis.plotBands.

shape Example

Below example demonstrates the simple code for creating a chart that displays the plot bands for a given data set.

<!DOCTYPE html>
<html>
<head>
<title>Spline with plot bands</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Wind speed'
        },
        xAxis: {
            type: 'datetime',
            labels: {
                overflow: 'justify'
            }
        },
        yAxis: {
            title: {
                text: 'Wind speed (m/s)'
            },
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            alternateGridColor: null,
            plotBands: [{ // Light air
                from: 0.3,
                to: 1.5,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'Light air',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Light breeze
                from: 1.5,
                to: 3.3,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Light breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Gentle breeze
                from: 3.3,
                to: 5.5,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'Gentle breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Moderate breeze
                from: 5.5,
                to: 8,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Moderate breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Fresh breeze
                from: 8,
                to: 11,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'Fresh breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Strong breeze
                from: 11,
                to: 14,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Strong breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // High wind
                from: 14,
                to: 15,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'High wind',
                    style: {
                        color: '#606060'
                    }
                }
            }]
        },
        tooltip: {
            valueSuffix: ' m/s'
        },
        plotOptions: {
            spline: {
                lineWidth: 4,
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                },
                pointInterval: 3600000, // one hour
                pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
            }
        },
        series: [{
            name: 'Hestavollane',
            data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
 
        }, {
            name: 'Vik',
            data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
        }],
        navigation: {
            menuItemStyle: {
                fontSize: '10px'
            }
        }
    });
});
</script>
</body>
</html>

Removing a plot band

shape Description

The plot bands can be removed by creating a remove button using button tag in the header section of an Html page.

shape Example

Below example demonstrates the simple code for creating a chart with remove plot band button in Highcharts Options.

<!DOCTYPE html>
<html>
<head>
<title>Removing plot band</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<button id="button" class="autocompare">Remove plot band</button>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            plotBands: [{
                color: '#FCFFC5',
                from: 4.5,
                to: 7.5,
                id: 'plotband-1'
            }]
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    // button action
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        chart.xAxis[0].removePlotBand('plotband-1');
    });
});
</script>
</body>
</html>

Spline with dashed and dotted plot lines

shape Description

The Spline in a chart can be represented with dashed and dotted plot lines by setting the option plotLines.dashStyle.

shape Example

Below example demonstrates the simple code for creating an spline chart with dashed and dotted plot lines in Highcharts Options.

<!DOCTYPE html>
<html>
<head>
<title>spline dashed dotted charts</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script> 
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<div id="report"></div>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        xAxis: {
            plotLines: [{ // mark the weekend
                color: 'red',
                width: 2,
                value: Date.UTC(2010, 0, 4),
                dashStyle: 'longdashdot'
            }],
            tickInterval: 24 * 3600 * 1000,
            // one day
            type: 'datetime'
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 24 * 3600 * 1000
        }]
    });
});
</script>
</body>
</html>

Toggle plot band

shape Description

The plot bands can be Toggle on a chart by creating a button using button tag in the header section of an Html page for removing or adding the Plot band.

shape Example

Below example demonstrates the simple code for creating a Toggle effect for adding or removing a plot band on a chart using CDN access for both Highcharts and jQuery.

<!DOCTYPE html>
<html>
<head>
<title>Toggle the plot bands</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 500px; margin: 0 auto"></div>
<button id="button" class="autocompare">Add plot band</button>
<script language="JavaScript">
$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    var hasPlotBand = false,
        chart = $('#container').highcharts(),
        $button = $('#button');
    $button.click(function () {
        if (!hasPlotBand) {
            chart.xAxis[0].addPlotBand({
                from: 5.5,
                to: 7.5,
                color: '#FCFFC5',
                id: 'plot-band-1'
            });
            $button.html('Remove plot band');
        } else {
            chart.xAxis[0].removePlotBand('plot-band-1');
            $button.html('Add plot band');
        }
        hasPlotBand = !hasPlotBand;
    });
});
</script>
</body>
</html>

Summary

shape Key Points

  • The line charts are used to view the data of different time intervals.
  • Plot bands and plot lines are similar to each other.
  • Highcharts provide various options for users to create an attractive and professional line charts.

shape Programming
Tips

  • Add the JavaScript files to the head section of the HTML page to create a chart.
  • Ensure that all the chart options or settings are correct before running the application.
  • Using CDN access for both jQuery and Highcharts is an easy way for end-user to create Highcharts.