O'Reilly logo

Learning Highcharts by Joe Kuan

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

Understanding Highcharts layouts

Before we start to learn how Highcharts layouts work, it is imperative that we understand some basic concepts first. To do that, let us first recall the chart example used in Chapter 1, Web Charts, and set a couple of borders to be visible. First, set a border around the plot area; to do that we can set the options of plotBorderWidth and plotBorderColor in the chart section, as follows:

        chart: {
                renderTo: 'container',
                type: 'spline',
                plotBorderWidth: 1,
                plotBorderColor: '#3F4044'
        },

The second border is set around the Highcharts container. Next, we extend the preceding chart section with additional settings:

        chart: {
                renderTo: 'container',
                ....
                borderColor: '#a1a1a1',
                borderWidth: 2,
                borderRadius: 3
        },

Basically, ...

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