Refresh charts in custom component to be visible-- how to do that with a button?

Hello,

I use Apex charts in a custom component on a record details page. My users say that when the details page is opened, the charts in the custom component are not visible. What the users have to do is refresh the page and then the charts are shown.

Can I add a button or something which my users can use to trigger this refresh? At this moment they have to select the URL and hit Refresh in their browser and particular on tablets this is not user-friendly.

The perfect solution should be that only the component that contains the charts is being ā€˜refreshedā€™.

The button/ trigger needs to have some code, since I cannot use the ā€œdefault refreshā€ button which is part of the Table componentā€¦

Anyone can help me with a quick fix solution? I can always name the button " show charts" or something like that.

Oh yes for sure that would be possible to add a button, and much more user friendly.

You could ask ChatGPT to write you some javascript that will refresh the page with the click of a button. And then just add that to the javascript tab on the page.

@Kristen , could you help me a little but more? I did a prompt, but the response did not do the trick unfortunately:

Iā€™m on the road this afternoon. Might be able to take a closer look a little later, unless someone else can offer any suggestions.

@slimpens

this might workā€¦

1 Like

Thatā€™s cool @TonyM, but I need to assign it to a specific element (component 5).

Now I added this to the Javascript of the page (based on Chat GPT), but it doesnā€™t work

function refreshComponent() {
const component = document.getElementById(ā€˜5ā€™);

as found in :slight_smile:
function refreshComponent() {
const component = document.getElementById(ā€˜5ā€™);

}

}

To clarify, @slimpens Iā€™m not sure you can refresh just a custom chart component, but you can get it to refresh the page. @TonyM 's suggestion is exactly what I was suggesting too.

If it was a table, you could refresh just the table component, but with a custom chart component, I donā€™t believe that will be possible.

@slimpens you could also try to delay the chart from loading right away by adding a setTimeout:

setTimeout(() => {
    //add chart javascript here
}, 2000); // 2000 milliseconds = 2 seconds - adjust as needed
1 Like