Change Color from Hover Box Amcharts

Question

I have some Question about the Hover Box in Amcharts. I want to change only the hover Box color. Is there anyone who can help me with this. When I go to the bar, the color that I set in the If else statement always comes up. But I want that I always set the color blue as background color when hovering(See attached). What am I doing wrong here

enter image description here

        var columnSeries = new am4charts.ColumnSeries();
        columnSeries.name = "Pegelstand";
        columnSeries.dataFields.valueY = "income";
        columnSeries.dataFields.categoryX = "year";

        columnSeries.columns.template.tooltipText = "[#000000 font-size: 15px]:\n[/][color:#000000 font-size: 20px]{valueY}[/] [#000000]{additional}[/]"

        columnSeries.columns.template.fill = am4core.color("#104547");

        columnSeries.columns.template.propertyFields.fill = "color:#000000";
        columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
        columnSeries.columns.template.propertyFields.stroke = "stroke";
        columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
        columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
        columnSeries.tooltip.label.textAlign = "middle";

        chart.series.push(columnSeries);

        var lineSeries = chart.series.push(new am4charts.LineSeries());
        lineSeries.name = "Pegelstand";
        lineSeries.dataFields.valueY = "expenses";
        lineSeries.dataFields.categoryX = "year";

        lineSeries.propertyFields.strokeDasharray = "lineDash";
        lineSeries.tooltip.label.textAlign = "middle";

        var counter = 0;


        columnSeries.columns.template.adapter.add("fill", function (fill, target) {

            if (target.dataItem && target.dataItem.valueY < 1155) {
                counter++;

                if (counter <= 62) {
                 
                    return am4core.color("#FFD400");
                }
                else if (target.dataItem && target.dataItem.valueY > 1200) {
                  
                    return am4core.color("#FF6A00");
                }
                else {
                   
                    return am4core.color("#FF0000");
                }
            }
            else {
                counter = 0;
                                 return am4core.color("#054145");
            }

Stéphane Laurent Stéphane Laurent · Accepted Answer · 2021-01-25T23:48:35

It's not easy to help without a fiddle.

I would try:

var tooltip = new am4core.Tooltip();
tooltip.background.fill = am4core.color("#0000FF");
columnSeries.columns.template.tooltip = tooltip;

Change Color from Hover Box Amcharts

1 Answers