jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

line series with multiple colors

i have series with lets say from 1 to 2 which should be green and from points 3 to 4 with red color ??

is this possible using same series .. using different colors in points.. i can change color of point using marker.. but not actually connecting lines between them

thanks
stpoa

Re: line series with multiple colors

Hi,

You can use BlackLabel's "Multicolor Series" plugin.
http://blacklabel.github.io/multicolor_series/

Code:

Code: Select all

const colors = Highcharts.getOptions().colors
const options = {
  series: [{
  	type: 'coloredline',
    data: [...Array(10)].map(function (v, i) {
    	return { y: Math.random(), segmentColor: colors[i], color: colors[i] }
    })
  }]
}
const chart = Highcharts.chart('container', options)
Live example:
https://jsfiddle.net/8jLcx7h7/

Regards.
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: line series with multiple colors

thanks a lot for reply.. but can i use this one with Highstock library ? when i tried using it.. i am getting error

multicolor_series.js:661 Uncaught TypeError: Cannot read properties of undefined (reading 'drawRectangle')
at multicolor_series.js:661:108
at multicolor_series.js:17:3
at multicolor_series.js:13:1

is there a way to fix this
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: line series with multiple colors

Hi jahnvi25,

Please create a live demo with the issue. You can start here: https://jsfiddle.net/BlackLabel/tvokd4m1/

Regards!
Mateusz Bernacik
Highcharts Developer
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: line series with multiple colors

here is the example. it does work with latest version.. but we are using little older version of highstock..

https://jsfiddle.net/ywja460x/1/

may be i can use older version of plugin ??

you can see error in google dev tools...
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: line series with multiple colors

Hi jahnvi25,

It doesn't work because module in which you can find drawRectangle method has changed. Please insert plugin code directly and correct module for drawRectangle method.

Code: Select all

    H.seriesTypes.coloredarea.prototype.drawLegendSymbol = Highcharts._modules['Mixins/LegendSymbol.js'].drawRectangle; // eslint-disable-line
Demo: https://jsfiddle.net/BlackLabel/c54dxhuf/

Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer
jahnvi25
Posts: 284
Joined: Thu Oct 04, 2012 12:16 pm

Re: line series with multiple colors

Thanks a lot for reply.. this is working as expected..
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: line series with multiple colors

You're welcome! In case of any further questions, feel free to contact us again.
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”