You can adjust several styles and specify a chart model in GridBase.headerItems of the grid to use the grid as a chart view. And, in the example below, it has directly specified the series items in the chart series rather than connected Data Set to the grid.
You can fill the entire width of the grid with one column and adjust the border to not to display overlapped lines, etc.
grid.setOptions({
display: {
// Fill the entire width with the column cell.
fitStyle: null
});
headerItems: {
// Fill the entire height with the chart.
fillHeight: 1,
// Remove the chart borders.
styles: {
borderRight: null,
borderBottom: null,
},
...
}
});
// Remove the right border of the cell in which displays the chart.
grid.loadStyles({
body: {
borderRight: null
},
header: {
borderRight: null
}
});
You can also directly set the series items.
var chart = {
...
series: [{
...
items: [{
year: '2000',
value: 53
}, {
year: '2001',
value: 73
},
...
]
}]
};