CODEWITHSUNDEEP
javascriptamchartsamcharts4
rai-gaurav
rai-gaurav

Reputation: 556

Amcharts4 : Highlighting line series on legend hover

I am trying to put an 'over' event on legend in my line chart. On hovering the legend, I am trying to highlight that particular line associated with the legend

I have gone through some example https://www.amcharts.com/docs/v4/tutorials/highlighting-column-series-on-legend-click/ and https://www.amcharts.com/docs/v4/tutorials/activate-deactivate-a-pie-slice-on-legend-click-instead-of-toggling/

and I am trying to simulate similar thing for line chart on 'mouse over' the legend.

chart.legend = new am4charts.Legend();
chart.legend.markers.template.width = 40;
chart.legend.markers.template.height = 10;

chart.legend.itemContainers.template.events.on("over", function(ev) {
            console.log(ev.target.dataItem.dataContext);
            console.log(ev.target.dataItem.dataContext.segments.template);
            let lineSeries = ev.target.dataItem.dataContext.segments.template;
           lineSeries.isActive = !lineSeries.isActive;

        });

I am unable to get 'isActive' key inside the output. I can see 'isBaseSprite: false','isHiding: false','isShowing: false' in console log. But there is no 'isActive' present as we have for column and pie chart.

I am not sure what I am doing wrong. Is This the right way for line chart ?

Upvotes: 0

Views: 1758

Answers (1)

pmsoltani
pmsoltani

Reputation: 1222

I have created a chart using the example provided in here. I've changed it so that it is now a stacked area chart.

It took me a while to identify the problem: just replacing columns with segments does not work here. In the createSeries function, you need both these lines:

series.fillOpacity = 0.6; 
series.segments.template.fillOpacity = 0.6;

The first one is for when the chart first deploys and the second one is in response to the defined hoverState:

var hoverState = series.segments.template.states.create("active");
hoverState.properties.fillOpacity = 1;

I'm not sure if this is a bug or not. I'm going to file an issue in amCharts' GitHub repo.

Here is the full code:

// Apply chart themes
am4core.useTheme(am4themes_animated);

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "country": "Lithuania",
  "research": 501.9,
  "marketing": 250,
  "sales": 199
}, {
  "country": "Czech Republic",
  "research": 301.9,
  "marketing": 222,
  "sales": 251
}, {
  "country": "Ireland",
  "research": 201.1,
  "marketing": 170,
  "sales": 199
}, {
  "country": "Germany",
  "research": 165.8,
  "marketing": 122,
  "sales": 90
}, {
  "country": "Australia",
  "research": 139.9,
  "marketing": 99,
  "sales": 252
}, {
  "country": "Austria",
  "research": 128.3,
  "marketing": 85,
  "sales": 84
}, {
  "country": "UK",
  "research": 99,
  "marketing": 93,
  "sales": 142
}, {
  "country": "Belgium",
  "research": 60,
  "marketing": 50,
  "sales": 55
}, {
  "country": "The Netherlands",
  "research": 50,
  "marketing": 42,
  "sales": 25
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

function createSeries(field, name) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "country";
  series.strokeWidth = 2;
  series.yAxis = valueAxis;
  series.name = name;
  series.tooltipText = "{name}: [bold]{valueY}[/]";
  series.tensionX = 0.8;
  series.stacked = true;

  // ********************************************************
  // Both lines are needed!
  // The 1st line makes the segments transparent when the chart
  // initializes. The effect of the second line is for when the
  // hovering over the legend occurs.
  series.fillOpacity = 0.6;
  series.segments.template.fillOpacity = 0.6;
  // ********************************************************

  var hoverState = series.segments.template.states.create("active");
  hoverState.properties.fillOpacity = 1;

  return series;
}

createSeries("sales", "Sales");
createSeries("research", "Research");
createSeries("marketing", "Martketing");

// Add legend
chart.legend = new am4charts.Legend();

// Disable toggling of slices
// chart.legend.itemContainers.template.togglable = false;

// Add 'over' & 'out' events to highlight the segments on hover
chart.legend.itemContainers.template.events.on("over", function(e) {
  var seg = e.target.dataItem.dataContext.segments.template;
  seg.isActive = !seg.isActive;
});
chart.legend.itemContainers.template.events.on("out", function(e) {
  var seg = e.target.dataItem.dataContext.segments.template;
  seg.isActive = !seg.isActive;
});
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<div id="chartdiv" style="height: 400px"></div>

Upvotes: 2

Related Questions