Charts

Charts are created using the ECharts library in combination with custom themes using Honeycomb chart design tokens.

ECharts allows you to create an abundance of different charts and graphs and we recommend you read their documentation to become familiar with everything you can do.

• Get Started with ECharts
• Honeycomb design tokens - Chart colors

Honeycomb theme

You can create and customize ECharts themes to fit your needs, you can find pre-assembled Honeycomb light and dark themes when exploring the Charts example project.

For now we don't provide the themes from a package or CDN link since they can be fine tuned in so many ways, but you can download the them,es from our example project and use it or tweak it on your own project.

React Support

While Echarts is platform agnostic (you can use it even if your project runs on pure JavaScript), you will find on our example project full support for a React wrapper that makes it very simple to use it in React projects. It will handle initializing ECharts, injects Honeycomb themes and theme switching, and handles charts manipulation.

• Stacked Line Chart
• Example Projects

Accessibility best practices

ECharts has comprehensive support for web accessibility features with their Aria component.

This allows you to use internationalized labels, customize titles and use the decal patterns that are very helpful for color blind people to differentiate chart colors.

In addition to that, it is always encouraged to have a visible title for the the chart and in case it requires a longer description to make it visible as a caption underneath it. You can use the ImageBox component with the captioned variation to provide the chart as a figure and the long description bellow.

• Basic Pie Chart
• Web Accessibility
• Aria Option
• Image Box Component