theme

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);