eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Change fill color of bar in gantt chart

Hi

i want to change the fill color of different bars in gantt highchart. Like i have 5 rows against 12 hour time, so each row gantt bar should be in different color.

ex. Row 1 bars have yellow color
Row 2 bars have green color
Row 3 bars have blue color so on

thanks
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change fill color of bar in gantt chart

Hello eraka!
To set the desired color to each bar/point in Highcharts all you have to add is a property color to each point object, like this:

Code: Select all

{
        name: 'Prepare office building',
        id: 'prepare_building',
        start: today + (1 * hour),
        end: today + (6 * hour),
	color: '#FFFF00'
}
In color property you can set an individual color for the point by using color in Hex, RGB, RGBa or just the name of color. By default, the color is pulled from the global colours array. I have prepared a simple demo for you, you can find it below.

Demo: https://jsfiddle.net/BlackLabel/Lctjr736/

Let me know if you have any further questions!
Kind regards!
Hubert Kozik
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Change fill color of bar in gantt chart

Hi Hubert
thanks for the quick reply , if i am not sure how many rows will be there, then what can i do?

is there array where i can declare values and can i give left border to that gant bar?

And can we increase the height of the gantt bar in a row
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change fill color of bar in gantt chart

eraka,
Yes, you can define an array containing the colors for the chart's series. You can find more information in the documentation here: https://api.highcharts.com/highcharts/colors
And a demo of using this array in Highcharts Gantt: https://jsfiddle.net/BlackLabel/u41rfd85/

If you want to change the height of a particular point you can use a pointWidth property. You can find the demo here: https://jsfiddle.net/BlackLabel/3urvmLcb/

It is also possible to set height property for the whole chart and Highcharts will automatically change heights for each cell, like in the example below: https://jsfiddle.net/BlackLabel/zo7scwr6/

Best regards!
Hubert Kozik
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Change fill color of bar in gantt chart

Thank u so much !!

2 more question:

1. Can we add left border to a gantt chart item or point.

2. Can we add a event on click of point.


Thanks!! :D
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Change fill color of bar in gantt chart

i found there is click event
Highcharts.addEvent(Highcharts.Point, 'click', (event: any) => {
const point = event.point;

console.log(event);
});


for left bottom if u can help
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change fill color of bar in gantt chart

eraka,
Sadly, you cannot add just a left border to points, you can only add a border to every edge of a point using borderWidth/borderColor properties. If you want to you can use a Highcharts SVG Renderer to render lines, which will imitate the border of points - you can check it in the demo below.

To add an event on click of point it is better to use the callback function in series.point.events.click property. You can read about other events here: https://api.highcharts.com/highcharts/s ... int.events

Demo: https://jsfiddle.net/BlackLabel/jry38xbm/

Kind regards!
Hubert Kozik
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Change fill color of bar in gantt chart

Thank you so much!! :D
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change fill color of bar in gantt chart

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Change fill color of bar in gantt chart

can we have dark pink rectangular possible in a point, plz see attached image.
Attachments
123123.PNG
123123.PNG (4.42 KiB) Viewed 1728 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change fill color of bar in gantt chart

eraka,
Yea, sure. You can change the color of the SVG rendered path in line number 19. I have also changed color of the first point. Please, check the demo below.

Demo: https://jsfiddle.net/BlackLabel/3phdsL1o/

Regards!
Hubert Kozik
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Change fill color of bar in gantt chart

Hi

but that border color can b changed , like for pink it is pink

for blue svg can we have blue border

for green can we have green border.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change fill color of bar in gantt chart

eraka,
Yes, you can change color using some JS code and update points and SVG Paths with these proper colors.

Demo: https://jsfiddle.net/BlackLabel/avd671z5/
API Reference: https://api.highcharts.com/class-refere ... int#update
https://api.highcharts.com/class-refere ... art#redraw

Kind regards!
Hubert Kozik
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Change fill color of bar in gantt chart

thank u so much!!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Change fill color of bar in gantt chart

No problem! If you will have any more questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Gantt”