ECharts Options

echartsOptions allow you to customize your chart with any combination of eCharts config options. Many config combinations can result in "broken" looking charts. Proceed with caution, and test your charts, particularly at different screen widths.

ECharts settings are specified in config object. Evidence generates this config for you through the props you pass to your chart.

If you can't get your chart to look "just right" with standard chart , you can use echartsOptions to customize your chart by adding or overriding the eCharts config directly.

ECharts Options Object

The options object is passed as follows. Note the double curly braces.

<BarChart
    data={query_name}
    x=column_x
    y=column_y
    echartsOptions={{exampleOption: 'exampleValue'}}
/>

See the eCharts docs for a full reference of config options.

Note that LLMs such as ChatGPT and GitHub Copilot are reasonably good at generating eCharts options if you explain what you are trying to achieve.

Series Options Object

Often if you are making custom changes to a chart, you will need to adjust options within ECharts' series. When you have a multi-series chart, each series shows up separately in the ECharts configuration generated by Evidence.

For example, if you have a stacked bar with 4 series, this is what the underlying config object might look like:

series: [
    {type: 'bar', barWidth: 5, name: 'Canada', data: [200,5525,222,444,666]},
    {type: 'bar', barWidth: 5, name: 'US', data: [1200,1555,1222,4144,6616]},
    {type: 'bar', barWidth: 5, name: 'UK', data: [2060,525,262,4844,4666]},
    {type: 'bar', barWidth: 5, name: 'Australia', data: [2200,5555,2252,8444,3666]}
]

If you wanted to add a custom border to the bars with echartsOptions, you would need to manually repeat for each series. E.g.,

<BarChart
    data={country_sales}
    x=date
    y=sales
    series=country
    echartsOptions={{
        series: [
            {itemStyle: {
                borderWidth: 1,
                borderColor: 'red'
            }},
            {itemStyle: {
                borderWidth: 1,
                borderColor: 'red'
            }},
            {itemStyle: {
                borderWidth: 1,
                borderColor: 'red'
            }},
            {itemStyle: {
                borderWidth: 1,
                borderColor: 'red'
            }}
        ]
    }}
/>

With seriesOptions, you can specify the changes once and have them applied to all series in the chart, like so:

<BarChart
    data={country_sales}
    x=date
    y=sales
    series=country
    seriesOptions={{
        itemStyle: {
            borderWidth: 1,
            borderColor: 'red'
        }
    }}
/>

Print ECharts Config

You can print the current eCharts config for a chart by adding printEchartsConfig=true to the chart. This will print the full config just below the chart.

This includes both any default Evidence config and any echartsOptions you have specified, and so can be useful for debugging.

<BarChart
    data={query_name}
    x=column_x
    y=column_y
    echartsOptions={{exampleOption: 'exampleValue'}}
    printEchartsConfig=true
/>

Example Configs

Customize the Legend Position

echartsOptions={{
    legend: {
        right: 'right',
        top: 'middle',
        align: 'auto',
        orient: 'vertical',
        padding: 7,
        borderColor: '#ccc',
        borderWidth: 1,
    },
    grid: {
        right: '120px'
    }
}}

Add Data Zoom

echartsOptions={{
    dataZoom: [
        {
            start: 0,
            end: 100,
        },
    ],
    grid: {
        bottom: '50px',
    },
}}

Add Series Labels Next to Chart

echartsOptions={{
    series: [
    {
        endLabel: {
            show: true,
            formatter: (params) => params.seriesName,
            offset: [0, 0], // [x, y] offset from the end of the line
        }
    },
    {
        endLabel: {
            show: true,
            formatter: (params) => params.seriesName,
            offset: [0, 0], // [x, y] offset from the end of the line
        }
    }
    ],
    grid: {
        right: '50px',
        top: '10px'
    }
}}

echartsOptions={{
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
}}