Demo - Data Labels
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.analytics.min.js"></script>
<div id="chart1">
</div>
CSS
body {
margin: 40px;
}
.wj-flexchart {
width: 100%;
}
JavaScript
onload = function() {
var chart1 = new wijmo.chart.FlexChart('#chart1', {
itemsSource: getData(1),
bindingX: 'country',
chartType: 'Column',
series: [
{ binding: 'sales', name: 'Sales' },
{ binding: 'downloads', name: 'Downloads'}
],
axisY: {
format: 'n0,',
title: 'Sales',
axisLine: true,
itemFormatter: function(engine, label) {
engine.textFill = 'darkred';
label.cls = null;
return label;
}
}
});
let axisY2 = new wijmo.chart.Axis();
axisY2.position = wijmo.chart.Position.Right;
axisY2.title = 'Downloads';
axisY2.format = 'n0,';
axisY2.min = 0;
axisY2.axisLine = true;
axisY2.itemFormatter = function(engine, label) {
engine.textFill = 'darkblue';
label.cls = null;
return label;
}
getSeries('downloads').axisY = axisY2;
var salesTLine = new wijmo.chart.analytics.TrendLine({
binding: 'sales',
style: { stroke: 'darkred', strokeWidth: 3 }
});
var dlTLine = new wijmo.chart.analytics.TrendLine({
binding: 'downloads',
style: { stroke: 'darkblue', strokeWidth: 3 }
});
chart1.series.push(salesTLine, dlTLine);
// create some random data
function getData(factor) {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
data.push({
country: countries[i],
downloads: Math.round(Math.random() * 20000 * factor),
sales: Math.round(Math.random() * 30000 * factor)
});
}
return data;
}
function getSeries(binding) {
let s = chart1.series;
//
for (let i = 0; i < s.length; i++) {
if (s[i].binding == binding) {
return s[i];
...