How to highlight activeEntries in ngrx-charts

user_11878329 0
Viewed 1475

How to highlight activeEntries in ngrx-charts for a line chart.

The documentation says:

activeEntries object[] [] elements to highlight

https://swimlane.gitbook.io/ngx-charts/examples/line-area-charts/line-chart

However when i pass in an object array i nothing is highlighted.

I have tried the following:

const activeEntries = [
  {name: "Mar 20, 2020", value: 73, series: "Table Name"}
];

const activeEntries = [
  {name: "Mar 20, 2020", value: 73}
];

My data that i pass in looks like this:

const data = [
   {
      "name": "Table Name",
      "series": [
         {name: "Mar 18, 2020", value: 71},
         {name: "Mar 19, 2020", value: 72},
         {name: "Mar 20, 2020", value: 73}
      ]
   }
];

And a snippet of my template

<ngx-charts-line-chart [activeEntries]="activeEntries" [results]="data" ...></ngx-charts-line-chart>

Am I misunderstanding the docs here?

Thanks for your help

ngx-charts d3.js angular
2 Answers

i found that activeEntries must be set to an array of objects, which contain the names of series you want to highlight. So for your example you would do something like:

const activeEntries = [{name: 'Table Name'}]

I only tested this with an area-chart.

user_167286170

The active entry needs to be the entire object:

const activeEntries = [
  {
      "name": "Table Name",
      "series": [
         {name: "Mar 18, 2020", value: 71},
         {name: "Mar 19, 2020", value: 72},
         {name: "Mar 20, 2020", value: 73}
      ]
   }
];

Or

const activeEntries = data[0];

StackBlitz

user_47398280
Related