Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@youjung-hong @jinwoo-kim-nhn
executable file 339 lines (262 sloc) 6.37 KB

Theme

With the Theme, you can change the design elements of the chart.
All themes will be set based on the default theme.


How to use theme

Register theme

Using tui.chart.registerTheme, you can register themes.

Example
var theme = {
    chart: {
        fontFamily: 'Verdana',
        background: {
            color: 'yellow',
            opacity: 1
        }
    }
};
tui.chart.registerTheme('newTheme', theme);

Using the theme

Example
//...
var options = {
    theme: 'newTheme'
};
tui.chart.barChart(container, data, options);

Setting entire theme

Example
var theme = {
    chart: {
        fontFamily: 'Verdana',
        background: {
            color: 'yellow',
            opacity: 0.5
        }
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting theme of chart title

You can set font-size, font-type, font-weight, color and background.

Example
var theme = {
    title: {
        fontSize: 20,
        fontFamily: 'Verdana',
        fontWeight: 'bold',
        color: 'blue',
        background: 'yellow'
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting theme of axis area

Setting theme of axis title

You can set font-size, font-family, font-weight and color.

Example
var theme = {
    xAxis: {
        title: {
            fontSize: 14,
            fontFamily: 'Verdana',
            fontWeight: 'bold',
            color: 'blue'
        }
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting theme of axis label

You can set font-size, font-family, font-weight and color.

Example
var theme = {
    xAxis: {
        label: {
            fontSize: 14,
            fontFamily: 'Verdana',
            fontWeight: 'bold',
            color: 'blue'
        }
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting tick color of axis

Using .tickColor property, you can set tick color of axis.

Example
var theme = {
    xAxis: {
        tickColor: 'red'
    },
    yAxis: {
        tickColor: 'blue'
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting theme of plot area

Plot theme setting is not valid in pie and map charts.

Setting line color of plot area

Using plot.lineColor property, you can set line color of plot area.

Example
var theme = {
    plot: {
        lineColor: 'skyblue'
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting backgorund of plot area

Using plot.background property, you can set background color of plot area.

Example
var theme = {
    plot: {
        background: '#efefef'
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting theme of series area, except map and heatmap charts

You can set series colors, border color, selection color.

Setting colors of series

Using series.colors property, you can set colors of series.

Example
var theme = {
    series: {
        colors: ['red', 'orange', 'yellow', 'green', 'blue']
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting border color of series.

Using series.borderColor property, you can set border color of series.
This property is available in the column , line, area, combo chart.

Example
var theme = {
    series: {
        borderColor: 'brown'
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting selection color of series.

Using series.selectionColor property, you can set selection color of series.
This property is available when using series.allowSelect option.

Example
var theme = {
    series: {
        selectionColor: 'brown'
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting theme of series area at map, heatmap and treemap charts

You can set start color, end color, mouseover color.

Setting start color, end color of series.

Using series.startColor property, you can set start color of series. And using series.endColor property, you can set end color of series.

Example
var theme = {
    series: {
        startColor: '#efefef',
        endColor: 'blue'
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting mouseover color of series.

Using series.overColor property, you can set mouseover color of series.

Example
var theme = {
    series: {
        overColor: 'lightgreen'
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting dot color of line type chart series.

Using series.dot property, you can set dot color, stroke, radius and hovered dot styles of line type chart series.

(line type chart series: line, area, radial)

Example
var theme = {
    series: {
        dot: {
            fillColor: null, // default = null ("color = null" means inherit series color)
            fillOpacity: 1,  // default = 1
            radius: 3, // default = 2
            strokeColor: '#888',
            strokeOpacity: 1, // default = 1
            strokeWidth: 2,        // default = 0
            hover: {
              fillColor: '#aa2',
              fillOpacity: 1, // default = 1
              radius: 10, // default = 4
              strokeColor: '#fff',
              strokeOpacity: 1, // default = 0.8
              strokeWidth: 2 // default = 3
            }
        }
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting theme of series for combo chart

If you want setting theme of series for combo chart, you can set series type key like column, line as a child of the series property. And it's contents like theme of series in single chart case.

Example
var theme = {
    series: {
        column: {
            colors: ['red', 'orange', 'yellow', 'green', 'blue']
        },
        line: {
            colors: ['gray', 'black']
        }
    }
};
tui.chart.registerTheme('newTheme', theme);

Setting theme of legend area

Setting label theme of legend area

You can set font-size, font-family, font-weight and color.

Example
var theme = {
 legend: {
     label: {
         fontSize: 14,
         fontFamily: 'Verdana',
         fontWeight: 'bold',
         color: 'blue'
     }
 }
};
tui.chart.registerTheme('newTheme', theme);
You can’t perform that action at this time.