CODEWITHSUNDEEP
javascripthighcharts
Rolando
Rolando

Reputation: 762

Distinguish borders between line and column chart type

I am working with a chart where there are two types of series:line and column. As a requirement the types must use the same colour. The problem with that is inability to distinguish between both (see first image)

I have created some code to add borders but that is only valid for the "dots" of the line:

 var avgSeries = this.getAvgSeries();
        _.forEach(avgSeries, (serie: any) => {
            _.forEach(serie.data, (dataPoint: any) => {
                if (dataPoint.graphic != undefined) { dataPoint.graphic.attr({ 'stroke': 'black', 'stroke-width': 1 }); }
            });
        });

1) In the image bellow you can see that line is not visible. I can know that line continue because I have added this black colour to the dots.

enter image description here

2) In the second image the line is visible because I put the mouse over the line.

enter image description here

Now, my question is how can I make the lines more visible as the second image?

Upvotes: 0

Views: 48

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

When you hover over a column in highcharts it brightens the color by 0.1 by default http://api.highcharts.com/highcharts#plotOptions.column.states.hover

If you look at your images, you'll notice the color of the column in the top is not the same as the bottom.

If you want to be able to distinguish between the column and the line, darken or lighten one slightly.

Upvotes: 1

Related Questions