var container = document.getElementById('chart-area'),
data = {
categories: ['June', 'July', 'Aug', 'Sep', 'Oct', 'Nov'],
series: [
{
name: 'Budget',
data: [5000, 3000, 5000, 7000, 6000, 4000]
},
{
name: 'Income',
data: [8000, 1000, 7000, 2000, 5000, 3000]
},
{
name: 'Expenses',
data: [4000, 4000, 6000, 3000, 4000, 5000]
},
{
name: 'Debt',
data: [6000, 3000, 3000, 1000, 2000, 4000]
}
]
},
options = {
chart: {
width: 700,
height: 400,
title: 'Monthly Revenue',
format: '1,000'
},
yAxis: {
title: 'Month'
},
xAxis: {
title: 'Amount',
min: 0,
max: 9000
}
};
tui.chart.barChart(container, data, options);
<div id="chart-area"></div>
<div class="custom-area">
<div class="apply-btn-area">
<input type="checkbox" id="use-theme" onclick="onCheckboxClick(this);"><label for="use-theme"> Theme</label>
<button id="btn" onclick="onBtnClick();">Apply Custom Data</button>
<input type="hidden" id="type" value="barChart">
</div>
<div>
<div>Chart Data</div>
<textarea id="data">
{
"categories": ["June", "July", "Aug", "Sep", "Oct", "Nov"],
"series": [
{
"name": "Budget",
"data": [5000, 3000, 5000, 7000, 6000, 4000]
},
{
"name": "Income",
"data": [8000, 1000, 7000, 2000, 5000, 3000]
},
{
"name": "Expenses",
"data": [4000, 4000, 6000, 3000, 4000, 5000]
},
{
"name": "Debt",
"data": [6000, 3000, 3000, 1000, 2000, 4000]
}
]
}
</textarea>
</div>
<div>
<div>Chart Options</div>
<textarea id="options">
{
"chart": {
"width": 700,
"height": 400,
"title": "Monthly Revenue",
"format": "1,000"
},
"yAxis": {
"title": "Month"
},
"xAxis": {
"title": "Amount",
"min": 0,
"max": 9000
}
}
</textarea>
<div class="btn-area">
<button onclick="openWindow('https://github.nhnent.com/fe/tui.chart/wiki/table-of-supported-options')">More Options</button>
</div>
</div>
<div id="theme-area">
<div>Chart Theme</div>
<textarea id="theme">
{
"series": {
"colors": ["#63A69F", "#F2E1AC", "#F2836B", "#F2594B"]
}
}
</textarea>
<div class="btn-area">
<button onclick="openWindow('https://github.com/nhnent/tui.chart/wiki/tutorial#full-theme')">More Theme</button>
</div>
</div>
</div>