highcharts-multicolor-series
Version:
Highcharts plugin that adds new series: multicolor-series, where you can define color for each part of a path, between two points.
681 lines (676 loc) • 13.3 kB
JavaScript
const coloredareaSeriesPointsTestData = [
{
segmentColor: "red"
},
{
segmentColor: "blue"
},
{
segmentColor: "yellow"
},
{
segmentColor: "green"
},
{
segmentColor: "green"
},
{
segmentColor: "brown"
},
{
segmentColor: "pink"
}
];
const coloredareaTrackerPathArrayTestData = [
[
"M",
-4.2745098039216,
142.5
],
[
"L",
5.7254901960784,
142.5
],
[
"L",
101.15032679739,
71.25
],
[
"L",
101.15032679739,
285
],
[
"L",
5.7254901960784,
285
],
[
"L",
15.7254901960784,
285
],
[
"M",
91.15032679739,
71.25
],
[
"L",
101.15032679739,
71.25
],
[
"L",
196.57516339869,
178.125
],
[
"L",
196.57516339869,
285
],
[
"L",
101.15032679739,
285
],
[
"L",
111.15032679739,
285
],
[
"M",
186.57516339869,
178.125
],
[
"L",
196.57516339869,
178.125
],
[
"L",
292,
249.375
],
[
"L",
292,
285
],
[
"L",
196.57516339869,
285
],
[
"L",
206.57516339869,
285
],
[
"M",
282,
249.375
],
[
"L",
292,
249.375
],
[
"L",
387.42483660131,
106.875
],
[
"L",
482.84967320261,
213.75
],
[
"L",
482.84967320261,
285
],
[
"L",
292,
285
],
[
"L",
302,
285
],
[
"M",
472.84967320261,
213.75
],
[
"L",
482.84967320261,
213.75
],
[
"L",
578.27450980392,
35.625
],
[
"L",
578.27450980392,
285
],
[
"L",
482.84967320261,
285
],
[
"L",
492.84967320261,
285
]
];
const coloredareaGraphsTestData = [
{
stroke: "red",
"stroke-width": 2,
pathArray: [
[
"M",
5.7254901960784,
142.5
],
[
"L",
101.15032679739,
71.25
],
[
"L",
101.15032679739,
285
],
[
"L",
5.7254901960784,
285
]
]
},
{
stroke: "blue",
"stroke-width": 2,
pathArray: [
[
"M",
101.15032679739,
71.25
],
[
"L",
196.57516339869,
178.125
],
[
"L",
196.57516339869,
285
],
[
"L",
101.15032679739,
285
]
]
},
{
stroke: "yellow",
"stroke-width": 2,
pathArray: [
[
"M",
196.57516339869,
178.125
],
[
"L",
292,
249.375
],
[
"L",
292,
285
],
[
"L",
196.57516339869,
285
]
]
},
{
stroke: "green",
"stroke-width": 2,
pathArray: [
[
"M",
292,
249.375
],
[
"L",
387.42483660131,
106.875
],
[
"L",
482.84967320261,
213.75
],
[
"L",
482.84967320261,
285
],
[
"L",
292,
285
]
]
},
{
stroke: "brown",
"stroke-width": 2,
pathArray: [
[
"M",
482.84967320261,
213.75
],
[
"L",
578.27450980392,
35.625
],
[
"L",
578.27450980392,
285
],
[
"L",
482.84967320261,
285
]
]
}
];
const coloredareaGraphPathsTestData = [
[
[
"M",
5.7254901960784,
142.5,
"L",
101.15032679739,
71.25,
"L",
101.15032679739,
285,
"L",
5.7254901960784,
285
],
"red"
],
[
[
"M",
101.15032679739,
71.25,
"L",
196.57516339869,
178.125,
"L",
196.57516339869,
285,
"L",
101.15032679739,
285
],
"blue"
],
[
[
"M",
196.57516339869,
178.125,
"L",
292,
249.375,
"L",
292,
285,
"L",
196.57516339869,
285
],
"yellow"
],
[
[
"M",
292,
249.375,
"L",
387.42483660131,
106.875,
"L",
482.84967320261,
213.75,
"L",
482.84967320261,
285,
"L",
292,
285
],
"green"
],
[
[
"M",
482.84967320261,
213.75,
"L",
578.27450980392,
35.625,
"L",
578.27450980392,
285,
"L",
482.84967320261,
285
],
"brown"
]
];
const coloredareaSegmentsTestData = [
{
color: "red",
points: [
{
graphicPathArray: [
[
"M",
5.5,
146.5
],
[
"A",
4,
4,
0,
1,
1,
5.500199999999918,
146.499999995
],
[
"Z"
]
]
},
{
graphicPathArray: [
[
"M",
101.5,
75.25
],
[
"A",
4,
4,
0,
1,
1,
101.50019999999992,
75.249999995
],
[
"Z"
]
]
}
]
},
{
color: "blue",
points: [
{
graphicPathArray: [
[
"M",
101.5,
75.25
],
[
"A",
4,
4,
0,
1,
1,
101.50019999999992,
75.249999995
],
[
"Z"
]
]
},
{
graphicPathArray: [
[
"M",
196.5,
182.125
],
[
"A",
4,
4,
0,
1,
1,
196.50019999999992,
182.124999995
],
[
"Z"
]
]
}
]
},
{
color: "yellow",
points: [
{
graphicPathArray: [
[
"M",
196.5,
182.125
],
[
"A",
4,
4,
0,
1,
1,
196.50019999999992,
182.124999995
],
[
"Z"
]
]
},
{
graphicPathArray: [
[
"M",
292.5,
253.375
],
[
"A",
4,
4,
0,
1,
1,
292.5001999999999,
253.374999995
],
[
"Z"
]
]
}
]
},
{
color: "green",
points: [
{
graphicPathArray: [
[
"M",
292.5,
253.375
],
[
"A",
4,
4,
0,
1,
1,
292.5001999999999,
253.374999995
],
[
"Z"
]
]
},
{
graphicPathArray: [
[
"M",
387.5,
110.875
],
[
"A",
4,
4,
0,
1,
1,
387.5001999999999,
110.874999995
],
[
"Z"
]
]
},
{
graphicPathArray: [
[
"M",
482.5,
217.75
],
[
"A",
4,
4,
0,
1,
1,
482.5001999999999,
217.749999995
],
[
"Z"
]
]
}
]
},
{
color: "brown",
points: [
{
graphicPathArray: [
[
"M",
482.5,
217.75
],
[
"A",
4,
4,
0,
1,
1,
482.5001999999999,
217.749999995
],
[
"Z"
]
]
},
{
graphicPathArray: [
[
"M",
578.5,
39.625
],
[
"A",
4,
4,
0,
1,
1,
578.5002,
39.624999995
],
[
"Z"
]
]
}
]
}
];