Theme use cases

Global Boosted theme for CSS and popover renderer

The most common use case should be using Boosted framework and its theme.

To do so, the getThemeManager() has one cssTheme option that allows you to specify the css theme used: 

cssTheme: ODSCharts.ODSChartsCSSThemes.BOOSTED5,

When using the external popover/tooltip feature, You can also specify the javascript used to display popover or tooltip. The popover/tooltip renderer can be specify by the second argument of the externalizePopover() feature of the theme manager: 

        themeManager.externalizePopover({},
          ODSCharts.ODSChartsPopoverManagers.BOOSTED5
        );

To choose between light or dark mode, you use the cssSelector option of getThemeManager(). It must give an HTML selector of an HTML element where the chart is displayed: 

cssSelector: '#barLineGroup_chart'

To interact with a dynamic dark/light mode switch, you use the manageThemeObserver() feature of the theme manager: 

themeManager.manageThemeObserver(myChart);

Title

Sub-Title

Global Boosted theme for CSS but Apache Echarts for popover renderer

Let's change the previous use case to keep Boosted 5 as CSS theme but let's use Apache Echarts javascript to display popover/tooltip by changing the second argument of the externalizePopover() feature of the theme manager: 

  themeManager.externalizePopover({},
    ODSCharts.ODSChartsPopoverManagers.NONE
  );

Title

Sub-Title

ODS Charts embedded CSS theme and Apache Echarts popover renderer

Some ODS Charts usage may be independent from Boosted. For that, ODS Charts has a minimal CSS embedded. To use it, change the cssTheme option of getThemeManager() with: 

cssTheme: ODSCharts.ODSChartsCSSThemes.NONE,

You still can use a dark/light theme mode by adding the ods-charts-context class and data-bs-theme attribute on the graph element holder: 

<div class="ods-charts-context" data-bs-theme="light">

Title

Sub-Title