Pre loader

Updating theme at runtime

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

Answered
0
0

Hi, I would like to update the theme at the runtime of the chart. In JS I have made a dropdown component from which I can change the theme of the chart. When this “select” component changes it calls in the following code:

function ChartThemeChanged() {
        var x = document.getElementById("ChatTheme").value;
        switch (x){
            case "dark":
                theme = new SciChart.SciChartJsNavyTheme();
                break;
            case "light":
                theme = new SciChart.SciChartJSLightTheme();
                break;
        }

        emissionSmallSciChartSurface.applyTheme(theme);
        emissionLargeSciChartSurface.applyTheme(theme);
        inertiaSmallSciChartSurface.applyTheme(theme);
        inertiaLargeSciChartSurface.applyTheme(theme);
    }

This works fine for the main chart area. I also have a LegendModifier which I placed on a different div with “placementDivId”. When I change the theme, as I said the main area of the chart changes but the legend does not change. How can I fix this? Is there any function I can call on the chart surface to trigger to reevaluate and redraw the legend with the correct new theme?

I have observed that if I add a new series to the chart with “emissionSmallSciChartSurface.renderableSeries.add(lineSeries);” the theme of the legend is applied. I guess it is applied because the legend is redrawn with the extra series but this is not really practical.
How can I fix this cleanly?
Thank you!

Version
latest
Images
  • You must to post comments
Best Answer
0
0

Salut, Alex

This should be done on our part when the “.applyTheme()” method is called, but you can force this by adding this at the end of your “ChartThemeChanged” function:
myLegend.sciChartLegend.invalidateLegend(); // assuming your legendModifier is named “myLegend”.

Here is a small demo: https://codepen.io/vasculandrei/pen/mdZqMwE?editors=0010
Hope this helps!

Best,
Andrei Vascul

  • You must to post comments
0
0

Thank you Andrei! Exactly what I was looking for! invalidateLegend() did the trick.

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.