How can I add a drop-down menu to change the theme of sci chart using html and js?

Question

I have an XY SciChart.js chart in which I added two line charts with dummy data.

Then I added a drop-down menu.

How can I add a drop-down menu to change the theme of sci chart using html css and js in visual studio code?

Answer 1

You can update the theme for a sciChartSurface by calling sciChartSurface.applyTheme. Documentation for this is here

If your select has the id "theme":

document.querySelector("#theme").onchange = (ev) => {
  const value = ev.target.value;
  let theme = new SciChart.SciChartJSDarkv2Theme();
  if (value === "Light") {
    theme = new SciChart.SciChartJSLightTheme();
  } else if  (value === "Custom") {
    theme.lineSeriesColor = "red";
    theme.sciChartBackground = `radial-gradient(circle, #615EFF 0%, #C4DFFF 100%)`;
    theme.axisBandsFill = "#AACDFF33";
    theme.tickTextBrush = "#0C0C63";
   }
  sciChartSurface.applyTheme(theme);
}

Full example on codepen