Chart doesn't update automatically when using props

[Jonny-Johnson]

Hi,

Thanks for your work!

I built a Solid app (RankingApp.jsx) and added my own component "LineChart" to it. In LineChart.jsx, I'm displaying the SolidApexCharts component. My problem is that the chart doesn't react to updated values being submitted from my app to my LineChart component.

My use case is that my app pulls data from an API on mount. It stores this data in a signal and that signal is delivered to the LineChart component as a prop, like so:
<LineChart data={resultSeriesData()}></LineChart>

In LineChart, I changed the series signal definition to use the prop:
... name: props.data?.[0].player.name, ...

The result is that the ApexChart will show "series-1" as the name on loading the chart for the first time, instead of the correct name. In another place of LineChart, I displayed the player.name value for debugging purposes and it updates just fine.

On mount, there is no data, as the fetch from the API is an async function. But a couple milliseconds later, the data is there and the chart should update, no?

I'm not very good at this fancy JS stuff, so maybe I misunderstood something?

Thanks
John

[Jonny-Johnson]

Mh. I think my issue has to do with the reactivity of the series signal, not with ApexCharts...

[Jonny-Johnson]

Yeah, it seems to be my misunderstanding of Solid's reactivity.

I added an Effect that sets the chart data when the props change. This is my current code:

createEffect(() => {
        console.log("Props changed!", JSON.stringify(props.data))
        if (props.data) setChartData()
})

function setChartData() {
        console.log("setChartData called")
        setSeries(
            //set data using props.data
            ... 
        )
}

If you don't mind helping me out, is this best practice or is there an easier solution?

[wobsoriano]

Hey, would you be able to create a basic reproduction via stackblitz?