Ngx-charts: Allow other data

[TolotraRam]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
Hi I have this as data in a pie chart :
{
'name': 'Carburant Pétrolier VE',
'value': 2306.18,
'filter': 'G33'
},
{
'name': 'Assurance (Prime et Fond de garantie)',
'value': 1537.95,
'filter': 'G69'
}

and on select when i get the data selected it returns only name and value NOT filter, is there a way to get the filter.

Expected behavior
I should get name and value and filter

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• ngx-charts version: x.x.x
  6.0.0

• Angular version: 2.x.x
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[marjan-georgiev]

I was thinking about putting all extra data that we want to pass in click/tooltip events in a separate property. So the data would look like this:

{
  'name': 'Carburant Pétrolier VE',
  'value': 2306.18,
  'data' : {
    'filter': 'G33'
  },
  ...
},
{
  'name': 'Assurance (Prime et Fond de garantie)',
  'value': 1537.95,
  'data' : {
    'filter': 'G33'
  },
  ...
}

This way, everything you would like to pass in those events (in addition to the name and value properties) should be put under data. Does that make sense?

Update 19 August 2019

This feature has been implemented and available since version 12.0.0. Instead of data, the property is called extra
The format now looks like this:

{
  'name': 'Assurance (Prime et Fond de garantie)',
  'value': 1537.95,
  'extra' : {
    'filter': 'G33'
  }
}

[TolotraRam]

Yes that make sense, can't wait for it .

[dvschnitz]

Are there any news about the feature? I'm really looking forward to it, since this would make everything so much easier.

[mpraksti1]

Bump, really need this feature. Hope it's still in the works!

[mpraksti1]

This is REALLY hacky and requires jquery(not sure what else to use but their index() method) but I got to my meta data in the following fashion:

onSelectClick(event) {
  const currentTargetIndex = $(event.target.parentElement).index();
  console.log(this.barChartData[currentTargetIndex].meta);
}

[ludcila]

I agree, this feature is necessary for creating more complex interactive charts

[ludcila]

Looks like for the simpler charts like bar charts and pie charts, you can add an extra property that can be retrieved in the click event
https://github.com/swimlane/ngx-charts/pull/303
{ name: '2010', value: 40632, extra: 'hello' }
Are there any plans to enable this for the other charts?

[stewones]

I'm looking for an extra field that can be assigned and retrieved in seriesTooltipTemplate, is that possible?

thanks for this awesome lib

[enkore]

This would be really sweet and enable some cool use cases. Think for example about a heat-map of events where simply hovering/clicking any given minute/hour/day/week gives you a tooltip with more details (what event types caused the hotspot? did they have a common source? etc.) – see something extraordinary? -> knowing what happened is just one click away.

[furkanilhan]

It is not working on line chart @marjan-georgiev

[UltraKenchie]

Bump, any news about this issue? Would be great if this is added.

[roughbits01]

Please add this my boss is gonna kill me :D

[markriser]

Bump, yes please!

[enkore]

Bump please, yes!

[jekuhns]

Another bump, really necessary feature, yes please.

[renathy]

+1

[mdroz8]

+1

[nicolongobardo]

+1

[annmarie-switzer]

I just wanted to throw in my vote that this gets added to the Tree chart, as well. Or possibly at least let Tree chart support the 'extra' property like Bar and Pie charts, do.

[SzymonGalazka]

+1

[sebastiangug]

Would definitely love this as well 🗡

[ripley]

It's very disappointing that this is never addressed ...

[marjan-georgiev]

This has been added and released in v12.0.0 via https://github.com/swimlane/ngx-charts/pull/1185

I missed closing this ticket, my bad.

The property is called extra instead of data as described above.
The format now looks like this:

{
  'name': 'Assurance (Prime et Fond de garantie)',
  'value': 1537.95,
  'extra' : {
    'filter': 'G33'
  }
}

You can try it on the demo page by clicking any of the bars on the bar chart.

[ripley]

@marjan-georgiev

Thank you for the information, I checked the demo page but looks like the extra field only available for bar chart and pie chart there, in my line chart it doesn't work, could you please confirm if it's there for line chart?

This has been added and released in v12.0.0 via #1185

I missed closing this ticket, my bad.

The property is called extra instead of data as described above.
The format now looks like this:

{
  'name': 'Assurance (Prime et Fond de garantie)',
  'value': 1537.95,
  'extra' : {
    'filter': 'G33'
  }
}

You can try it on the demo page by clicking any of the bars on the bar chart.