Line Graph

Important Note for the React Kit: In order to leverage this kit, you must install highcharts and highcharts-react-official into your project as shown below. To then apply Playbook styles to your Highchart, import lineGraphTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

Default


Legend


Legend Position


Prop

align Type: String | Values: left | center | right (defaults to center)
verticalAlign Type: String | Values: top | middle | bottom (defaults to bottom)
layout Type: String | Values: horizontal | vertical | proximate (defaults to horizontal)
x Type: Number (defaults to 0)
y Type: Number (defaults to 0)

layout determines the position of the legend items
layout: proximate will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.

x offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right

y offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.

Legend Nonclickable


Height


By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.

Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

Color Overrides


Custom data colors allow for color customization to match the needs of business requirements.
Import the colors from Playbook's tokens, then set custom colors in the colors array using the desired color variables. Hex colors are also available eg: #CA0095.


Available Props