Custom ECharts

Our chart library is based on ECharts, a powerful and flexible open source JavaScript chart library. We use many of the features in ECharts, and combine them with custom data transformation, logic, and theming.

<ECharts> Component

If you would like to create a fully custom chart, you can use our built-in <ECharts> component. This component accepts a JavaScript object containing a chart configuration. To test this out, you can find an example on the ECharts example page and paste the option object into the Evidence <ECharts> component.

This will let you create a chart that matches Evidence theming, but gives you access to the full suite of ECharts features.

The downside of this approach is that <ECharts> requires data to be included in the configuration object, which can be difficult depending on the type of chart you need. If you would like to use specialized ECharts features, but retain the data management you get with Evidence charts, we recommend building a mixed-type chart and passing in an options object for the specific features you need.

How to Build the Configuration

To create a JavaScript object in an Evidence markdown page, you need to add a <script> tag. Any objects or variables you create in that script tag are then accessible by the rest of your page using curly braces. For example, if you create a variable named myVar, you can show the contents of that variable in your markdown using {myVar}.

Examples

Simple Treemap

Link to ECharts example

ECharts requires the data object to have a specific format. For example in the treemap chart show below it expects the columns to be called “name” and “value”. The test_data query in the code below renames the fields from the original query so ECharts can use them.

Loading...

Funnel Chart

Link to ECharts example

ECharts requires the data object to have a specific format. For example in the funnel chart show below it expects the columns to be called “name” and “value”. The funnel_data query in the code below renames the fields from the original query so ECharts can use them.

Loading...

Pie Chart

Link to ECharts example

ECharts requires the data object to have a specific format. For example in the pie chart show below it expects the columns to be called “name” and “value”. The pie_data query in the code below renames the fields from the original query so ECharts can use them.

Loading...

Donut Chart

Link to ECharts example

ECharts requires the data object to have a specific format. For example in the donut chart show below it expects the columns to be called “name” and “value”. The donut_data query in the code below renames the fields from the original query so ECharts can use them.

Loading...

Advanced Chart

Link to ECharts example

Loading...