ODS Charts

Powerful and feature-packed frontend toolkit. ODS Charts is based on Apache Echarts, Orange branded and ergonomic charts library. 

npm i ods-charts@0.2.0 echarts
Read the docs

Currently v0.2.0

All releases

Main functionalities

Here are the main functionalities of ODS Charts.

  1. Basic and advanced charts
    Access bar charts, line charts, pie charts, and many more easily.
  2. Intuitive JavaScript API
    A config object and some handsome functions.
  3. Ease accessibility
    We provide a full set of accessible colors, svg rendering, keyboard navigation, etc...
  4. ODS branded
    Colors, typography, ODS components, and spacing are all furnished by ODS Charts.
  5. Optimized rendering
    Svg rendering and efficient updates of the charts.
  6. Complete documentation and examples
    Interactive playgrounds, integration guides, detailed API, ...

Get started easily

Get started with Apache Echarts and ODS Charts easily.

Install via package manager

Install Apache Echarts and ODS Charts via npm, or yarn.

npm install ods-charts@0.2.0 echarts
yarn add ods-charts@0.2.0 echarts

Use it in your project

ODS Charts 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 renderer 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.