How to highlight activeEntries in ngrx-charts

Question

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

You can't highlight a single point in chart or serie. The flag activeEntries highlights whole line, so have to pass only the name of your data. In your case "Table Name", like the answer below - https://stackoverflow.com/a/69821113/2575875 — Mert Aksoy, Jun 14 '23 at 12:09

score 2 · Answer 1 · answered Nov 03 '21 at 07:34

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.

score -2 · Answer 2 · answered Nov 16 '20 at 16:02

-2

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

answered Nov 16 '20 at 16:02

katyusha

151
1
11

1

Sorry but I have followed the Stackblitz link and I see absolutely nothing highlighted, the two series look and behave identically. Am I missing something? What is activeEntries supposed to *actually* do? – AlePorro Jul 03 '21 at 15:13
@AlePorro, activeEntries sets which table should be highlighted when the chart loads. Try removing [activeEntries]="activeEntries" in the StackBlitz, watch it reload, then add it back in. You'll see that with it set, Table 2 is highlighted when the chart loads. Without it, none of the data is highlighted on load. – katyusha Aug 18 '21 at 16:04
can't we highlight individual points in a line? – Tiju John Oct 21 '21 at 12:42
@TijuJohn no, only the whole serie – Mert Aksoy Jun 14 '23 at 12:10

How to highlight activeEntries in ngrx-charts

2 Answers2