Angular ngx-charts how to get x axis number

Question

I have an Angular Ngx vertical chart , and I need to get only x axis number. I want to use this x axis number at onSelect function.

Html :

  <ngx-charts-bar-vertical
        [xAxisLabel]="xAxisLabel"
        [yAxisLabel]="yAxisLabel"
        (select)="onSelect($event)"
        [results]="dataSource">
  </ngx-charts-bar-vertical>

DataSource :

[ {userId: 5, name: "User Name example", value: 69.6} ... ]

I want to get "userId" part in fact, but i couldn't . When I select a bar , onSelect is getting only the "name" and the "value" parts, but not 'userId' part.

In reality, i want that the exactly opposite of this stuff : https://github.com/swimlane/ngx-charts/issues/409
Here want to hide allData but i want to get all data when i click a bar.

So i think that :

Get x axis number
userId = dataSource[xAxisNumber].userId;

How can i do that ?

score 0 · Answer 1 · answered Apr 29 '18 at 01:56

0

Since you already have the name you can use array.find() method to get the userId values as follows,

const userId = dataSource.find(t=>t.name === 'onselectedname').userId;

answered Apr 29 '18 at 01:56

Sajeetharan

216,225
63
350
396

Sorry but this technique doesn't work because of same user names – mevaka Apr 29 '18 at 05:04
then use array.filter() and access the 0th name – Sajeetharan Apr 29 '18 at 05:19
@mevaka what ? i dont get it – Sajeetharan Apr 29 '18 at 10:49
Think about it : You have 5 data with same name and value , if you use this technique , you only can show 0ht data every time , but you want to show 0th, 1st , 2nd etc data too.. Yes I know I can create a helper variable for counting how many times I clicked and reference it , but same value set is not only one , for example I have 100 data , 5 of them's value is 6, 7 of them's value is 5 etc.. I want to access only the number of data that referencing exactly what I clicked, because I have a lot of data and some of them are really same. – mevaka Apr 29 '18 at 10:58

score 0 · Accepted Answer · answered Apr 29 '18 at 16:02

I found a simple solution : Added an extra field only , and it's Ok.

Now my dataSource is like that :

{ name: 'User Name', value: 40,32, extra: { userId: 17 }

so now i can get extra field, then I can get use userId field .

It helped me : https://github.com/swimlane/ngx-charts/issues/506

Angular ngx-charts how to get x axis number

2 Answers2