I have a requirement to display an event based calendar. However, there are almost no functionalities related to calendar and its just a graphical representation of events throughout a year. Hence I have planned to use HighCharts columnrange graph. This saves me a lot of boilerplate for event listening.
However, when I get several overlapping events, its hard for me to show them as distinct.
How can I use highcharts existing features to accomplish this.
I have looked for style properties in events. But couldn't found anything helpful.
I tried searching if highcharts provides any form of gradient's implementation, but I didn't get much help there either.
I tried giving color with an opacity as rgb(r,g,b, 0.2) but somehow this gets turn to black.
Here is my working demo. In this chart event8 and event7 are overlapping. There exact time duration is similar to event 9 and event 10 respectively.
I found a similar question here, but this question talks of vertical overlapping while I need to distinguish horizontal overlapping (as shown in demo). Also I tried the answer given here, which had no affect.
Can someone suggest the way to achieve it ?
I think that good idea is to use partially-transparent colors for your columns. To use transparent colors you should use rgba, not rgb parameter.
Here you can find code that may help you:
data: [{
name: 'event7',
x: 1,
low: 36,
high: 43,
color: "red"
}, {
name: 'event8',
x: 1,
low: 25,
high: 38,
color: "rgba(100,100,100,0.6)"
}]
And here you can find live example how it can work: http://jsfiddle.net/ay1Lk2yw/4/