ods-charts
    Preparing search index...

    ods-charts

    Orange Design System Charts

    ODS Charts provides Orange Charts components to developers.

    Visit ODS Charts general 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

    ODSChartsTheme.getThemeManager

    The theme is configured with ODSChartsThemeOptions:

    Additional features can be added calling methods on ODSChartsTheme:

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

    <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

    Code released under the MIT License.