features chart

Chart Feature

• This section introduces about common feature of the chart.

---

Setting dimension of the chart

Using chart.width, chart.height options, you can setting dimension of the chart.

Example

var options = {
    chart: {
        width: 500,
        height: 400
    }
};

---

Setting title of the chart

Using chart.title option, you can set the title of the chart.
The title of the chart is placed at a top of the chart.

Example

var options = {
    chart: {
        title: 'Chart Title'
    }
};

---

Title positioning

If you want moving title position, you can use object type chart.title option. In this case, title text is using chart.title.text option. chart.title.offsetX, chart.title.offsetY options are using for moving a title to four direction like top, bottom, left and right.

Example

var options = {
    chart: {
        title: {
            text: 'Usage share of web browsers',
            offsetY: 50
        }
    }
};

---

Formatting for values

Using chart.format option, you can format for rendering values.

Simple formatting

If you set option to string like '1,000', '0011', '0.000', you can format like examples.

Example

// raw data
var rawData = {
    series: [
        {
            data: 9000
        }
    ]
};

// formatting to comma
var options = {
    chart: {
        format: '1,000'
    }
};
// 9,000


// formatting to zero fill
var options = {
    chart: {
        format: '01000'
    }
};
// 09000

// formatting to decimal point
var options = {
    chart: {
        format: '0.00'
    }
};
// 9000.00

Custom formatting

If you set option to function, you can custom formatting for rendering value.

Example

// raw data
var rawData = {
    series: [
        {
            data: 9000
        }
    ]
};

// custom formatting
// areaType is kind of rendered area like 'series', 'yAxis', 'xAxis', 'circleLegend', 'legend'
// valueType is kind of value like 'value', 'x', 'y', 'r'. (default: value)
// legendName is the representative name of the value
//   (legendName is included if areaType is tooltip, series, or makingSeriesLabel.)
var options = {
    chart: {
        format: function(value, chartType, areaType, valuetype, legendName) {
            if (areaType === 'series') { // formatting at series area
                formattedValue = tui.chart.renderUtil.formatToComma(value);
            } else {
                formattedValue = value;
            }

            return value;
        }
    }
}

---

Resizing chart

Using .resize method, you can resize chart.

Example

//...
var chart = tui.chart.barChart(data);

chart.resize({
    width: 700,
    height: 800
});