ods-charts

Orange Design System Charts

ODS Charts provides Orange Charts components to developers.

Visit ODS Charts general documentation

API documentation

Documentation
Example
Copyright and license

Documentation

Once the library integrated, via

script <script src="...ods-charts.js">
or an import * as ODSCharts from 'ods-charts'

use ODSCharts.getThemeManager( ODSChartsThemeOptions) to get the ODSChartsTheme.

The ODS Charts library is configured

by settings options on ODSChartsThemeOptions
by calling features on ODSChartsTheme

ODSChartsTheme.getThemeManager

Theme options

The theme is configured with ODSChartsThemeOptions:

ODSChartsThemeOptions.colors: colors to be used to graph the chart.
ODSChartsThemeOptions.cssTheme: optionally indicates an external theme to be used like boosted.
ODSChartsThemeOptions.chartConfiguration: type of chart using this theme and its configuration.
ODSChartsThemeOptions.cssSelector: css selector of an element that determines the light or dark mode. Optional, default is 'body'. Not needed if the ODSChartsTheme.manageThemeObserver feature is used.

Graph features

Additional features can be added calling methods on ODSChartsTheme:

ODSChartsTheme.externalizeLegends: to add Orange Design System theme to legends.
ODSChartsTheme.externalizePopover: to add Orange Design System theme to popover or tooltip.
ODSChartsTheme.manageChartResize: to dynamically adapt graph size to its container.
ODSChartsTheme.manageThemeObserver: to dynamically switch between theme dark/light mode .

The ODSChartsTheme is used to build the ODS theme and the charts options.

Examples

<html lang="en">
  <head>
    <script type="text/javascript" src="<...>ods-charts.js"></script>
    <script src=" https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js "></script>
  </head>
  <body>
    <div id="chart1" style="width: 800px; height: 400px"></div>
    <div id="chart1_legends"></div>
    <script>
      var lineChartODSTheme = ODSCharts.getThemeManager();
      echarts.registerTheme(lineChartODSTheme.name, lineChartODSTheme.theme);

      const chart1 = echarts.init(document.getElementById('chart1'), lineChartODSTheme.name, {
        renderer: 'svg',
      });
      chart1.setOption(
        lineChartODSTheme
          .setDataOptions({
            xAxis: {
              data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks'],
            },
            series: [
              {
                name: 'sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
              },
            ],
          })
          .manageChartResize(chart1, 'chart1')
          .externalizePopover()
          .externalizeLegends(chart1, 'chart1_legends')
          .manageThemeObserver(chart1)
          .getChartOptions()
      );
    </script>
  </body>
</html>

See more online dynamic examples
See more online use cases

Copyright and license

Code released under the MIT License.