Multicolor series - Highcharts module
-Go to project page to see this module in action: http://blacklabel.github.io/multicolor_series/.
+ + + -Requirements
+ -The latest code is available on github: https://github.com/blacklabel/multicolor_series/
+ + + -Usage and demos
+ -
- series: [{
- type: 'coloredline',
- data: [{
- y: 200,
- segmentColor: 'red'
- },{
- y: 210,
- segmentColor: 'red'
- },{
- y: 210,
- segmentColor: 'red'
- },{
- y: 100,
- segmentColor: 'green'
- }, {
- y: 100,
- segmentColor: 'red'
- }]
- }]
+
+
+
+
+
+
+ 
+
+ Multicolor Series Highcharts Module
+ Typescript-supported Highcharts plugin that adds both line/area multicolor series, where you can define color for each part of a path.
+
+
+
+
+
+
+
+
+
+ The latest code is available on GitHub:
+
+ https://github.com/blacklabel/multicolor_series/
+
+
+
+
+ General prerequisites
+ This module requires Highcharts package with the following versions installed in your project:
+
+ - 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
+ NPM
+
+ 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
+
+ CDN
+
+ Add a <script> tag below the Highcharts script tag:
+
+ <script src="https://cdn.jsdelivr.net/npm/highcharts-multicolor-series"></script>
+
+
+ Usage
+ Basic usage example:
+ The Live example is available here.
+ 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'
+ }]
+ }]
+});
+ Basic usage example with Typescript (React):
+ The Live example is available here.
+ import * as Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
-Parameters
-
-
-
-
- Property
- Description
-
-
-
-
- point.segmentColor
- Controls line color between N and N+1 point, independent from point.color, which changes marker color.
-
-
- series.type
- Set it to "coloredline" or "coloreadarea" to use multicolor series.
-
-
-
-
-Demo
-
-
-
-
-
-
-Releases
-
-
- - Versions 2.x.y: compatible with Highcharts >= 4.2.2
- - Versions 1.x.y: compatible with Highcharts < 4.2.2
-
-