Multicolor series - Highcharts module

Plugin developed by Black Label.

Go to project page to see this module in action: https://blacklabel.github.io/multicolor_series/.

General prerequisites

- For version 3.1.0: Highcharts v12.0.0+
- For version 3.0.0: Highcharts v11.3.0+
- For version 2.4.0 - 3.0.0: Highcharts v10.0.0 - v11.2.0
- For version 2.3.0: Highcharts v9.2.0 - v9.3.3
- For version 2.x.x: Highcharts v4.2.2 - v9.2.0
- For version 1.x.x: Highcharts v4.0.0 - v4.2.2

Installation

$3

Get the package from NPM in your app:
``
npm install highcharts-multicolor-series
`
If Highcharts is not already installed, get the package with Highcharts:
`
npm install highcharts highcharts-multicolor-series
`

$3


Add a script tag below the Highcharts script tag:
`HTML

`

Usage and demos

$3

The Live example is available here.

`JS
Highcharts.chart('container', {
series: [{
type: 'coloredline',
data: [{
y: 70,
segmentColor: 'blue'
}, {
y: 20,
segmentColor: 'green'
}, {
y: 40,
segmentColor: 'yellow'
}, {
y: 50,
segmentColor: 'red'
}, {
y: 10,
segmentColor: 'pink'
}]
}]
});
`

$3

The Live example is available here.

`tsx
import * as Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

// Implement the package module.
import MulticolorSeries from "highcharts-multicolor-series";
MulticolorSeries(Highcharts);

// The package allows you to import both Highcharts.SeriesMulticolorLineOptions and
// Highcharts.SeriesMulticolorAreaOptions interfaces, accordingly to the series.
// Interfaces extend the default series options.

const App = () => {
// Type the chart options.
const options: Highcharts.Options = {
series: [
{
type: "coloredarea",
data: [
{
y: 40,
segmentColor: "red"
},
{
y: 60,
segmentColor: "blue"
},
{
y: 30,
segmentColor: "yellow"
},
{
y: 10,
segmentColor: "green"
},
{
y: 50,
segmentColor: "brown"
},
{
y: 20,
segmentColor: "pink"
},
{
y: 70,
segmentColor: "orange"
}
]
}
]
};

return ;
};

export default App;
`

Parameters

| Parameter | Type | Required | Defaults | Description |
| --------- | :----: | :--------: | :--------: | ----------- |
| series.type | String | yes | - | Set it to "coloredline" or "coloredarea" to use multicolor series. |
| point.segmentColor | String | no | - | Controls line color between n and n+1 point, independent from point.color, which changes marker color. |

Changelog

The changelog is available here.

Development

To ensure best compatibility, it is recommended to use pnpm as a package manager.

Tests

This package contains tests for the proper elements rendering. To run tests, type:
`
npm run test
``

License

This package is licensed under MIT.

The package is built on top of the Highcharts library which requires a commercial license. Non-commercial use may qualify for a free educational or personal license. Read more about licenses here.