Overview of Style Customization

This article provides an overview of the different approaches about style customization. For example, how to config the color, size, shadow of the graphic elements and labels.

The term “style” may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.

These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.

Theme
Pallette
Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)
Visual encoding (visualMap component)

Other article about styling can be check in Customized Chart Styles and Visual Map of Data.

Theme

Setting a theme is the simplest way to change the color style. For example, in Examples page, “Theme” can be selected, and view the result directly.

Since ECharts4, besides the original default theme, ECharts provide another two built-in themes, named ''light' and 'dark'. They can be used as follows:

var chart = echarts.init(dom, 'light');

或者

var chart = echarts.init(dom, 'dark');

Other themes are not included in ECharts package by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in Theme Builder. Theme can also be created or edited in it. The downloaded theme can be used as follows:

If a theme is downloaded as a JSON file, we should register it by ourselves, for example:

var xhr = new XMLHttpRequest();
// Assume the theme name is "vintage".
xhr.open('GET', 'xxx/xxx/vintage.json', true);
xhr.onload = function () {
    var themeJSON = this.response;
    echarts.registerTheme('vintage', JSON.parse(themeJSON))
    var chart = echarts.init(dom, 'vintage');
    // ...
});
xhr.send();

If a them is downloaded as a JS file, it will auto register itself:

// Import the `vintage.js` file in HTML, then:
var chart = echarts.init(dom, 'vintage');
// ...

Palette

Pallettes can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.

option = {
    // Global palette:
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    series: [{
        type: 'bar',
        // A palette only work for the series:
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // A palette only work for the series:
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)

It is a common way to set style explicitly. Throughout ECharts option, style related options can be set in various place, including itemStyle, lineStyle, areaStyle, label, etc.

Generally speaking, all of the built-in components and series follow the naming convention like itemStyle, lineStyle, areaStyle, label etc., although they may occur in different place according to different series or components.

There is another article for style setting, Customized Chart Styles.

Style of emphasis state

When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by emphasis property. The options in emphasis is the same as the ones for normal state, for example:

option = {
    series: {
        type: 'scatter',

        // Styles for normal state.
        itemStyle: {
            // Color of the point.
            color: 'red'
        },
        label: {
            show: true,
            // Text of labels.
            formatter: 'This is a normal label.'
        },

        // Styles for emphasis state.
        emphasis: {
            itemStyle: {
                // Color in emphasis state.
                color: 'blue'
            },
            label: {
                show: true,
                // Text in emphasis.
                formatter: 'This is a emphasis label.'
            }
        }
    }
}

Notice: Before ECharts4, the emphasis style should be written like this:

option = {
    series: {
        type: 'scatter',

        itemStyle: {
            // Styles for normal state.
            normal: {
                color: 'red'
            },
            // Styles for emphasis state.
            emphasis: {
                color: 'blue'
            }
        },

        label: {
            // Styles for normal state.
            normal: {
                show: true,
                formatter: 'This is a normal label.'
            },
            // Styles for emphasis state.
            emphasis: {
                show: true,
                formatter: 'This is a emphasis label.'
            }
        }
    }
}

The option format is still compatible, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the “normal” term, which makes the option more simple and neat.

Visual encoding (visualMap component)

visualMap component supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in Visual Map of Data.