Closed Ashishvkale closed 2 months 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
})
})
Thanks @martynasma For always helping precisely.
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
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.
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.
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