amcharts / amcharts5

The newest, fastest, and most advanced amCharts charting library for JavaScript and TypeScript apps.
Other
345 stars 92 forks source link

Facing issues with series.data.setAll() #1658

Closed Ashishvkale closed 2 weeks ago

Ashishvkale commented 1 month ago

I'm working with column series. The column series working fine (showing titles on each column) when I give data in loop one by one. Below is codepen : https://codepen.io/ashish-kale-ak/pen/KKjWqKB

But when I'm passing all data at once with series.data.setAll(data) Its showing only last item correctly (showing title on last column only ) . Below is codepen : https://codepen.io/ashish-kale-ak/pen/xxormxb

How can I make it to work same in both cases

martynasma commented 1 month ago

In first pen you don't push data items one by one, you create a separate series for each individual column.

In second pen, you are reusing the same Label element for all bullets. You need to create a Label for each individual bullet:

series.bullets.push(() => {
  const label = am5.Label.new(root, {
    text: "columnTitle",
    centerY: am5.p50,
    paddingLeft: 0,
  })

  label.adapters.add("text", (value, target) => {
    // @ts-ignore this is needed
    const fill = target.dataItem?.dataContext.columnSettings.fill
    if (fill) return "xyz"
    else return "Title for column group"
  })
  return am5.Bullet.new(root, {
    locationX: 0,
    sprite: label
  })
})
Ashishvkale commented 1 month ago

Thanks @martynasma For always helping precisely.

Ashishvkale commented 1 month ago

One last question When I dispose the serieses before adding the new data and recreating it again gets a flickering effect occurs which I don't want I dipose like this :

public disposeSeries(item: string): void {
        const seriesToDispose: any[] = []

        this.chart?.series.each((series) => {
            if (series.get("name") === item) seriesToDispose.push(series)
        })

        seriesToDispose.forEach((series) => {
            this.chart?.series.removeIndex(this.chart.series.indexOf(series)).dispose()
        })
    }

and if I didn't dispose it gets multiple rows with the same data I want it to make it smooth data addition not flickered one

@martynasma Here's the code pen for same https://codepen.io/ashish-kale-ak/pen/xxormxb?editors=0010

martynasma commented 1 month ago

Let's keep this place clutter-free, both for our own sake and the other's. If you have other questions, not directly related to original topic, please post a separate issue.

github-actions[bot] commented 3 weeks ago

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.