<html>
<head>
<script src="https://cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/js/latest/data-adapter.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/themes/latest/wines.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
<table id="tableWithData" border="1" cellpadding="5">
<caption>Product Sales</caption>
<thead>
<tr>
<th>Categories / Brands</th>
<th>HomeStan</th>
<th>Telesto Pro</th>
<th>Videoguy</th>
</tr>
</thead>
<tbody>
<tr>
<td>DVD player</td>
<td>10</td>
<td>5</td>
<td>4</td>
</tr>
<tr>
<td>Home theater</td>
<td>14</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>Karaoke player</td>
<td>20</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>Projector</td>
<td>13</td>
<td>6</td>
<td>15</td>
</tr>
<tr>
<td>TV receiver</td>
<td>15</td>
<td>14</td>
<td>13</td>
</tr>
</tbody>
</table>
</body>
</html>
* {
margin: 0;
}
#container, html, body {
width: 100%;
height: 100%;
}
#container {
float: left;
width: 100%;
}
#tableWithData {
display: none;
}
anychart.onDocumentLoad(function() {
anychart.theme(anychart.themes.wines);
var tableData = anychart.data.parseHtmlTable('#tableWithData');
var chart = anychart.bar();
chart.data(tableData);
chart.yScale().stackMode('percent');
var legend = chart.legend();
legend.enabled(true);
var tooltip = chart.tooltip();
tooltip.displayMode('union');
tooltip.textFormatter('{%SeriesName}: {%Value} ({%YPercentOfCategory}%)');
chart.container('container');
chart.draw();
});
Also see: Tab Triggers