e1337Ha][0R
Posts: 5
Joined: Fri Jan 14, 2022 1:35 pm

Background color for negatives and columns dim on hover

Hello All, chart in the first screen needs to remove the gray background.

In the second screen, columns become dimmer when I hover the cursor over any of the chart points, I need to make color of the columns remains the same.

https://www.screencast.com/users/wefega ... 51ebe0b5fe

https://www.screencast.com/users/wefega ... f339030e3d

Thanks for your help.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Background color for negatives and columns dim on hover

Hello e1337Ha][0R,

Welcome to our forum and thanks for contacting us with your question!

You can easily change the hover state by the following code:

Code: Select all

  plotOptions: {
    series: {
      states: {
        inactive: {
          opacity: 1
        }
      }
    }
  }

API Reference:
https://api.highcharts.com/highcharts/p ... s.inactive

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

When it comes to the background, I'm not sure what it is exactly.
Could you reproduce the issue in an online editor that I could work on? You can use the above demo.

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
e1337Ha][0R
Posts: 5
Joined: Fri Jan 14, 2022 1:35 pm

Re: Background color for negatives and columns dim on hover

Thank you, your answer was helpful, I also solved background color issue by using negativeBackground option, I have a couple more questions:

1) I need to add horizontal lines along the entire chart. Below judging by the code, they should be present, but also as you can see from the screenshots above they are not displayed.

2) Also need to round the top corners of the columns, preferably without using third-party packages.

I found a pretty simple solution, we need to add the

Code: Select all

'clip-path' style: 'inset(0% 0% -2px 0% round 3px)'
CSS for each column, but how to do it right ?

Code: Select all

        let options = {
            chart: {
                type: 'column',
                renderTo: targetElementId,
                negativeBackground: '#fff',
                events: {
                    redraw: function (event) {
                        if (event.target.userOptions.cfxAxisUpdate) {
                            event.target.userOptions.cfxAxisUpdate = false;
                            return;
                        }
                        event.target.userOptions.cfxAxisUpdate = true;
                        event.target.userOptions.labelsUpdate = false;
                        ChartUtils.updateTickPositions(event.target, 'cashflow', event.target.userOptions.selectedDateRange);
                    }
                }
            },
            title: {
                text: null
            },
            xstep: 1,
            labelRenderType: ChartUtils.labelRenderType.monYYYY3,
            cfxAxisUpdate: false,
            labelsUpdate: false,
            chartName: 'cashflow',
            xAxis: {
                crosshair: true,
                tickPositions: ticks,
                labels: {
                    style: {
                        fontFamily: 'Source Sans Pro',
                        'color': ChartUtils.chartConfig.labelColor,
                        'font-size': '12px'
                    },
                    autoRotation: false,
                    align: 'center',
                    formatter: ChartUtils.generalLabelFormatter
                },
                gridLineWidth: 1,
                lineWidth: 1,
                lineColor: ChartUtils.chartConfig.lineColor,
                gridLineColor: ChartUtils.chartConfig.gridLineColor,
                tickWidth: 0,
                max: data.categories.length - 1,
                categories: data.categories
            },
            yAxis: {
                title: false,
                lineWidth: 1,
                lineColor: ChartUtils.chartConfig.lineColor,
                gridLineColor: ChartUtils.chartConfig.gridLineColor,
                gridLineWidth: 1,
                min: yMin,
                labels: {
                    formatter: function () {
                        return ChartUtils.GetValueWithCurrency(this.value / 1000, planCurrencyId, planCurrencyPosition) + 'k';
                    },
                    style: {
                        fontFamily: 'Source Sans Pro',
                        'color': ChartUtils.chartConfig.labelColor,
                        'font-size': '12px'
                    }
                }
            },
            plotOptions: {
                column: {
                    borderWidth: 0,
                    maxPointWidth: 40,
                    borderTopRadius: 0
                },
                area: {
                    negativeColor: "#fff"
                },
                series: {
                    marker: {
                        enabled: false,
                        states: {
                            hover: {
                                enabled: true,
                            }
                        }
                    },
                    events: {
                        mouseOver: function(event) {
                            this.update({
                                marker: {
                                    enabled: true
                                }
                            });
                        },
                        mouseOut: function(event) {
                            this.update({
                                marker: {
                                    enabled: false
                                }
                            });
                        }
                    },
                    // Make the circles that appear on the cash/cash actuals line only appear on hover
                    // stickyTracking: false
                }
            },
            credits: {
                enabled: false
            },
            exporting: {
                buttons: {
                    contextButton: {
                        enabled: false
                    }
                }
            },
            legend: {
                itemStyle: ChartUtils.chartConfig.legendTextStyle,
                itemHoverStyle: ChartUtils.chartConfig.hoverLegendTextStyle,
            },
            series: data.series,
            selectedDateRange: selectedDateRange
        };

        chart = Highcharts.chart(options);
        chart.redraw(true);
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Background color for negatives and columns dim on hover

Hi,

That's great to hear you found the solution for the background!

1) The best option will be adding plotLines to the yAxis. Check the following demo:

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

API Reference:
https://api.highcharts.com/highcharts/yAxis.plotLines

2) You can add clip-path property for the columns by using the .highcharts-point CSS class

Demo:
https://jsfiddle.net/BlackLabel/0axo3b8y/

If you decide to use our rounded-corners.js plugin, here is the example of how to use it:

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

Plugin:
https://github.com/highcharts/rounded-corners

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
e1337Ha][0R
Posts: 5
Joined: Fri Jan 14, 2022 1:35 pm

Re: Background color for negatives and columns dim on hover

I was able to make rounded corners with css, but as for the horizontals, I wanted to add gray lines along the Y-axis values, like in this example: https://jsfiddle.net/BlackLabel/nx01kc7s/ at -6, -4, -2, etc.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Background color for negatives and columns dim on hover

Hi,

These ones are the gridLines. They are added by default, but you disable them by the colour in your project.
If you want them grey you can just remove the following line from your code or change the color:

Code: Select all

  yAxis: {
    gridLineColor: 'ChartUtils.chartConfig.gridLineColor' // I suppose to it's a transparent
  },

Demo:
https://jsfiddle.net/BlackLabel/0ug7jxar/

API Reference:
https://api.highcharts.com/highcharts/y ... dLineColor

If you want to change the colour of the specific gridLines, you can use mentioned plotLines with specified values:

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

or use a special wrap:

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

API Reference:
https://www.highcharts.com/docs/extendi ... highcharts

Feel free to ask any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
e1337Ha][0R
Posts: 5
Joined: Fri Jan 14, 2022 1:35 pm

Re: Background color for negatives and columns dim on hover

Thanks, I already tried it, but for some reason it doesn't work, no errors, no warnings, property is just ignored, I guess the problem is somewhere else, not in the chart.

After I set the "clip-path" another problem occurred, now all sections of the column are rounded as in the screenshot below, but only the tops need to be rounded.

https://www.screencast.com/users/wefega ... f966bb7812

I tried adding CSS as you suggested above, in highcharts.css, but for some reason that didn't work either, so I did the property setting via js, here's the code.

Code: Select all

    export function setRoundedBorders(chartName: string, borderStyle: string): void {
        let chartColumns = document.getElementById(chartName)?.getElementsByTagName('rect');

        for (let i = 0; i < chartColumns?.length; i++)
            if (chartColumns[i].classList.contains('highcharts-point'))
                chartColumns[i].style.clipPath = borderStyle;
    }

Unfortunately there is no container element for columns, otherwise the solution would be trivial, nevertheless, maybe you know how I can make all <rect> elements of one column to be in one container, like <div> or something else.
e1337Ha][0R
Posts: 5
Joined: Fri Jan 14, 2022 1:35 pm

Re: Background color for negatives and columns dim on hover

I improved the script, now it seems to be working.

Code: Select all

    export function setRoundedBorders(chartName: string, borderStyle: string): void {

        let chartColumnElements = document.getElementById(chartName)?.getElementsByTagName('rect');
        let columnsArray = [];

        let previousX = -1;

        for (let i = 0; i < chartColumnElements?.length; i++)
            if (chartColumnElements[i].classList.contains('highcharts-point') && chartColumnElements[i].height.animVal.value > 0)
                columnsArray.push(chartColumnElements[i]);

        columnsArray = columnsArray.sort((a, b) => a.x.animVal.value - b.x.animVal.value);

        let topColumn = undefined;

        for (let columnPart of columnsArray)
            if (columnPart.x.animVal.value > previousX) {
                previousX = columnPart.x.animVal.value;

                topColumn = columnsArray
                    .filter(elem => elem.x.animVal.value === previousX)
                    .filter(elem => Math.max(elem.y.animVal.value))[0];

                topColumn.style.clipPath = borderStyle;
            }
    }
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Background color for negatives and columns dim on hover

Hi,

I would still recommend using our plugin, but happy to hear that you have found the solution!

You have mentioned highcharts.css - do you use the styledMode at your project? This could explain why my solutions didn't work with gridLines.
I could help you to find the right solution, but I need to see the full configuration of your chart at the demo. You can start here: https://jsfiddle.net/BlackLabel/b8djevq3/

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”