Layout and Positioning
- Chart & Plot Area
- Credits
- Axis Labels
- Legend
- Title and Subtitle
- Export
Borders
Backgrounds
Fonts
Shadows
Styling Axes
Tooltip
Animation

1. Layout and Positioning

Most Highcharts elements displayed on a chart can be positioned using :

x and y values relative to the top left corner
the "align" and "verticalAlign" options
- "align" : have the values "left" | "right" | "center"
- "verticalAlign" : have the values "top" | "bottom" | "middle"

Chart & Plot Area

Chart

The chart's position in the HTML page
- defined by the position of the container div
Height and width is set by setting
- a height and width of the container div
- the chart.height and chart.width Highcharts options

Plot Area

The plot area = the square area within the axes, where the series are drawn.

2 sets of options that decide where the plot area is placed within the chart :

margin options (marginLeft | marginTop)
- give the margin to the actual plot area
- does not apply to other elements on the chart (labels, legend etc.)
- (by default) null
spacing options (spacingLeft | spacingTop)
- decide the padding between the outer area and all elements inside a chart
- the chart will adjuste to make room for title and legend, axis labels etc.

Margins are only used in legacy charts as well as in situations where you want to make sure plot areas are align between multiple charts.

Margins override their counterpart spacing options.

chart: {
        // Edit chart spacing
        spacingBottom: 15,
        spacingTop: 10,
        spacingLeft: 10,
        spacingRight: 10,

        // Explicitly tell the width and height of a chart
        width: null,
        height: null
}

Credits

Credits can be moved around using the "position" option:

credits: {
    position: {
        align: 'left',
        verticalAlign: 'bottom',
        x: 10,
        y: -10
    }
}

See api.highcharts.com#credits for full option set.

Axis Labels

Axis labels can be placed relative to the plot area using the "align" option, "x" and "y" options.

labels: {
    align: 'right',
    x: -10,
    y: 0
}

They can also be rotated using the "rotate" option.

Font styling for the axis labels are given through the xAxis.labels.style options.

See xAxis.labels for full option set.

Legend

The legend is by default placed at the bottom of the chart in the center. This can be changed by the "align" and "verticalAlign" options.

The legend can also be positioned anywhere in the chart area using the "floating" option.

This will cause the legend to float freely over the plot area.

legend:{
     align: 'left',
     verticalAlign: 'top',
     floating: true        
}

The legend can also be positioned using the "x" and "y" options.

See api.highcharts.com#legend for full option set.

Title and Subtitle

The title and subtitle can be positioned using the "align", "verticalAlign", "x" and "y" options.

They can also float setting the "floating" option to true.

General text styling is set in the style option.

The text can also be styled inline using spans and CSS.

title: {
    text: 'Example with bold text',
    floating: true,
    align: 'right',
    x: -30,
    y: 30
}

Export

The export buttons can be styled through options given in the navigation and exporting.buttons.

2. Borders

A chart can have two borders that are both disabled by default.

The outer border is enabled by giving chart.borderWidth a pixel value.
- further styled by other options like chart.borderRadius, chart.borderColor.
- These borders will also be part of the exported chart.
  - If you want a border that is not visible in the export, using a CSS border on the container div may be a good alternative.
The plot border is the inner border around the plot area, marked with orange in the figure above.
- This border is enabled by giving chart.plotBorderWidth a pixel value.
- Its color is set by chart.plotBorderColor.

Both these borders can be complemented by a shadow through the chart.shadow or chart.plotShadow options.

3. Backgrounds

Chart area

accepts a background color through the chart.backgroundColor options.
Advanced backgrounds and background images :
- can be applied to the HTML container
- but won't be visible until the chart.backgroundColor is set null

Plot area

accepts a background color through the chart.plotBackgroundColor option.
has a chart.plotbackgroundImage option to allow setting image backgrounds.

4. Fonts

A global font family can be set using the chart.style option:

Highcharts.setOptions({
    chart: {
        style: {
            fontFamily: 'serif'
        }
    }
});

All layout elements of the chart that include text, have a style option that allow setting text related CSS properties. There are options like xAxis.labels.style, title.style, legend.itemStyle to mention a few. If you go to api.highcharts.com and search for "style" you'll get the full list.

Style properties are given in camel case like in JavaScript. So fontFamily will work, but "font-family" will not.

Common for all these is that all CSS is set to the related SVG/HTML/VML element, but not all have any effect. These configurations are meant for styling text, so properties like color, textUnderline, fontSize, fontFamily, textShadow etc. will make good sense. Other properties, like margin, padding and other layout related properties will not have an effect (or even an unintended effect) and should not be used. Layout is instead handled by specific Highcharts layout options.

5. Shadows

Many layout elements including series types in Highcharts have shadow options.

Go to api.highcharts.com and search for "shadow" to see the full list.

The shadow can be false, or true to display the shadow.

In addition to that, the shadow can be an object configuration containing color, offsetX, offsetY, opacity and width.

For instance, the options can be used to add a glow to the graphs:

shadow: {
    color: 'yellow',
    width: 10,
    offsetX: 0,
    offsetY: 0
}

See it demonstrated at jsFiddle.

amelieykw/01 - Design and Style.md