Amcharts 4: On hover bar in ColumnSeries change color

Question

I have a ColumnSeries chart that looks like this:

When I hover a bar I want it to change color to #ffe876.

I have tried to add a hoverState but it doesnt work:

// Create a hover state
var hoverState = valueAxis.columns.template.states.create("hover");
hoverState.properties.fill = am4core.color("#ffe876");

This is my code:

<script>
am4core.ready(function() {
    var chart = am4core.create("chartdiv_visits_per_week", am4charts.XYChart);
    chart.data = [
        {
            "x": "31",
            "value": 1
        },
        {
            "x": "32",
            "value": 2
        },
        {
            "x": "33",
            "value": 2
        }
    ];
    // Create axes
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "x";
    categoryAxis.renderer.grid.template.disabled = true;
    categoryAxis.renderer.labels.template.disabled = true;

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.grid.template.disabled = true;
    valueAxis.renderer.labels.template.disabled = true;


    // Create series
    var series1 = chart.series.push(new am4charts.ColumnSeries);
    series1.dataFields.valueY = "value";
    series1.dataFields.categoryX = "x";
    series1.name = "Human unique";
    series1.tooltipText = "Human unique week {categoryX}: {valueY}";
    series1.fill = am4core.color("#f2a654");
    series1.stroke = am4core.color("#f4b570");
    series1.strokeWidth = 0;

    // Tooltips
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.snapToSeries = series;
    chart.cursor.xAxis = valueAxis;


}); // end am4core.ready()
</script>
<div id="chartdiv_visits_per_week" style="height: 100px;"></div>

What can I do to make the bar change color when I hover it?

Answer 1

You need to add the state to the series, not the axis.

var hoverState = series1.columns.template.states.create("hover");
hoverState.properties.fill = am4core.color("#ffe876");

Demo below:

var chart = am4core.create("chartdiv_visits_per_week", am4charts.XYChart);
chart.data = [
  {
    "x": "31",
    "value": 1
  },
  {
    "x": "32",
    "value": 2
  },
  {
    "x": "33",
    "value": 2
  }
];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "x";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.labels.template.disabled = true;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.disabled = true;


// Create series
var series1 = chart.series.push(new am4charts.ColumnSeries);
series1.dataFields.valueY = "value";
series1.dataFields.categoryX = "x";
series1.name = "Human unique";
series1.tooltipText = "Human unique week {categoryX}: {valueY}";
series1.fill = am4core.color("#f2a654");
series1.stroke = am4core.color("#f4b570");
series1.strokeWidth = 0;
// Create a hover state
var hoverState = series1.columns.template.states.create("hover");
hoverState.properties.fill = am4core.color("#ffe876");

// Tooltips
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series1;
chart.cursor.xAxis = valueAxis;

<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv_visits_per_week" style="height: 100px;"></div>