Pelagos themes for Highcharts
npm install @bluecateng/pelagos-highchartsPelagos themes for Highcharts.
``bash`
npm i -S @bluecateng/pelagos-highcharts
The themes.less file must be included after highcharts.css.
`css`
@import '~highcharts/css/highcharts.css';
@import '~@bluecateng/pelagos-highcharts/less/themes';
To force a theme, add highcharts-light or highcharts-dark to the html element.highcharts-auto
If no class is set (or you use as an app-level convention), the theme follows the browser's prefers-color-scheme setting.
To apply a color subset for a component the function buildColorSetClass can be used to create a class name
for the chart element.
`javascript`
The class highcharts-set-alert may be used when the chart represents status information
(error/caution/warning/success).
These are the suggested Highcharts options to use these themes.
`javascript
import {setOptions} from 'highcharts';
setOptions({
chart: {animation: false, colorCount: 14, styledMode: true, spacing: [8, 0, 0, 0]},
credits: {enabled: false},
exporting: {buttons: false},
legend: {enabled: false, itemDistance: 12, symbolPadding: 2},
time: {timezone: undefined},
plotOptions: {series: {animation: false}},
title: {text: null},
xAxis: {tickLength: 8, labels: {distance: 12}},
yAxis: {tickLength: 8, labels: {distance: 12}},
});
``