I'm a newbie to Angular. I started working with Highcharts. I want to plot line series with multi colors. I'm able to do it with zones, but my requirement is bit different. I want to assign color for each line between points - either for the charts of line type or spline.
Is it possible to plot a line series with different color - irrespective of zones?
CodePudding user response:
Hi Shivabharathi Ponnuvelu, You can try with gradient I guess. https://jsfiddle.net/9L3f0w8h/29/
https://www.demo2s.com/javascript/javascript-highcharts-spline-chart-gradient-fill.html
lineColor: {
linearGradient: [0,0,0,1],
stops: [
[0, 'green'],
[0.5, 'red'],
[1, 'blue']
]
}
Is there any specific reason you want to use this without zones?
CodePudding user response:
You can achieve something similar like in zones by adding a few series type scatter and connect them lineWidth.
For better clarity, to make the scatter plot look like a line, you can disable the point marker.enabled.
chart: {
type: 'scatter'
},
plotOptions: {
scatter: {
lineWidth: 2,
marker: {
enabled: false
}
}
},
series: [{
data: [{
x: 1,
y: 10
},
{
x: 2,
y: 15
}
],
color: 'red'
},
{
data: [{
x: 2,
y: 15
},
{
x: 3,
y: 25
}
],
color: 'blue'
},
{
data: [{
x: 3,
y: 25
},
{
x: 4,
y: 5
}
],
color: 'green'
},
],
Demo:
http://jsfiddle.net/BlackLabel/6f8noxLr/
API References:
https://api.highcharts.com/highcharts/plotOptions.scatter.marker.enabled https://api.highcharts.com/highcharts/plotOptions.scatter.lineWidth