Orange Design System Charts

ODS Charts provides Orange Charts components to developers.
Visit ODS Charts documentation

Report bug · Request feature

Table of contents

• Quick start
• Status
• Bugs and feature requests
• Contributing
• Versioning
• Copyright and license

Quick start

Start by installing ODS Charts library:

• Install with npm: npm install ods-charts, and use it in your JavaScript files: import * as ODSCharts from 'ods-charts';
• Or use the CDN version of the library: https://cdn.jsdelivr.net/npm/ods-charts@latest (not recommended for eco-design reasons, useful for prototyping).

The ODS Charts library is to be used with Apache ECharts to create charts that adhere to the Orange Design System guidelines.

So, install Apache ECharts library:

• Install with npm: npm install echarts, and use it in your JavaScript files: import * as echarts from 'echarts';
• Or use the CDN version of the library: https://cdn.jsdelivr.net/npm/echarts@latest (not recommended for eco-design reasons, useful for prototyping).

It has been designed to be minimally intrusive and not to interfere with the use of the Apache ECharts library. The Apache ECharts documentation remains the reference for configuring charts.

For instance, an Apache ECharts user can initialize a chart using code like this:

var div = document.getElementById('barLine_chart');
var myChart = echarts.init(div, undefined, {
  renderer: 'svg', // SVG is recommended
});
// display the chart.
myChart.setOption(dataOptions);

Adding the theme managed by ODS Charts will then consist of doing:

// build the theme
var themeManager = ODSCharts.getThemeManager({
  // options can be used for configuration
});

// register this theme to echarts
echarts.registerTheme(themeManager.name, themeManager.theme);

var div = document.getElementById('barLine_chart');
var myChart = echarts.init(
  div,
  themeManager.name, // initialize the chart with the generated theme
  {
    renderer: 'svg', // SVG rendered is recommended
  }
);

// enrich data options to complete implementation of the Orange Design System.
myChart.setOption(themeManager.getChartOptions(dataOptions));

The themeManager returned by getThemeManager() can be used to add other features supported by the ODS Charts library.

Read the API documentation for details on this legends, popover, tooltip... features.

Read the documentation for information on the library content and examples.

Status

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Please refer to the developer guide for information on how to build the library.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, ODS Charts is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we adhere to those rules whenever possible.

See the Releases section of our GitHub project for changelogs for each release version of ODS Charts.

Copyright and license

Code released under the MIT License.