Charts

Norsk Tipping charts use

Highcharts is a comprehensive charting library that enables the creation of dynamic and visually compelling charts for web applications. This guide outlines how to integrate Highcharts by utilizing predefined colors and styles from @ntds/tokens. Due to its extensive array of available properties, Highcharts does not come packaged as a standard NTDS component. This ensures flexibility and accessibility in customization. Highcharts further extends its capabilities with a dedicated ChatGPT service, available at https://www.highcharts.com/chat/gpt/, designed to assist in chart creation.

Using Predefined styles from @ntds/tokens

The @ntds/tokens package offers a variety of colors and fonts that can be seamlessly integrated with charts. Highcharts do not use css-classes to style the charst and therfore we use @ntds/tokens to style it. Below, you will find examples showcasing how to apply these styles. It is important to note that the method for altering colors may vary across different chart types, so consulting each charts documentation is recommended.

Getting Started

To begin using Highcharts in your project, run the following command: