Highlighting column on axis label click
This demo shows how we can add hit events to CategoryAxis labels, so that we can highlight respective column by applying active state to it.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
// Apply chart themesam4core.useTheme(am4themes_animated);am4core.useTheme(am4themes_dataviz);
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { country: "Lithuania", research: 501.9 }, { country: "Czech Republic", research: 301.9 }, { country: "Ireland", research: 201.1 }, { country: "Germany", research: 165.8 }, { country: "Australia", research: 139.9 }, { country: "Austria", research: 128.3 }, { country: "UK", research: 99 }, { country: "Belgium", research: 60 }, { country: "The Netherlands", research: 50 }];
// Create axesvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "country";categoryAxis.title.text = "Local country offices";categoryAxis.renderer.grid.template.location = 0;categoryAxis.renderer.minGridDistance = 20;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());valueAxis.title.text = "Expenditure (M)";
// Create seriesfunction createSeries(field, name) { var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueY = field; series.dataFields.categoryX = "country"; series.name = name; series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]"; series.columns.template.fillOpacity = 0.7; series.columns.template.strokeWidth = 0;
var hs = series.columns.template.states.create("active"); hs.properties.fillOpacity = 1;
series.columns.template.events.on("hit", highlighColumn);
return series;}
createSeries("research", "Research");
// Add eventscategoryAxis.renderer.labels.template.events.on("hit", highlighColumn);categoryAxis.renderer.labels.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;
function highlighColumn(ev) { chart.series.each(function (series) { if (series instanceof am4charts.ColumnSeries) { series.columns.each(function (column) { if (column.dataItem.categoryX == ev.target.dataItem.category) { column.isActive = true; } else { column.isActive = false; } }); } });}<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 9pt;}
#chartdiv { width: 100%; height: 400px;}highlighting-column-on-axis-label-click