The Data Charts support combo charts. To combine different types of charts, you can configure multiple plots.
Notes: before using the data chart, tables in data manager should be initialized.
window.onload = async () => {
const { spread, designer } = createSpreadAndDesigner();
await initDataManager(spread);
spread.setSheetCount(2);
const sheet1 = spread.getSheet(0);
sheet1.name('Common Combo Charts')
const dataChart11 = sheet1.dataCharts.add('chart11', 20, 20, 450, 300);
dataChart11.setChartConfig({
tableName: 'Sales',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
details: [{ field: 'Region' }],
},
config: {
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}, {
type: GC.Spread.Sheets.DataCharts.DataChartType.line,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
},
config: {
symbols: true,
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}],
config: {
header: {
title: 'Column + Line',
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
},
});
const dataChart12 = sheet1.dataCharts.add('chart12', 490, 20, 450, 300);
dataChart12.setChartConfig({
tableName: 'Sales',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
},
config: {
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}, {
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Return', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
},
config: {
palette: ['#5ca4e5'],
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}],
config: {
header: {
title: 'Column + Column',
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
},
});
const dataChart13 = sheet1.dataCharts.add('chart13', 20, 340, 450, 300);
dataChart13.setChartConfig({
tableName: 'Sales',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.stackedColumn,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
color: { field: 'Region' },
},
config: {
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}, {
type: GC.Spread.Sheets.DataCharts.DataChartType.line,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
},
config: {
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}],
config: {
header: {
title: 'Stacked Column + Line',
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
},
});
const dataChart14 = sheet1.dataCharts.add('chart14', 490, 340, 450, 300);
dataChart14.setChartConfig({
tableName: 'Sales',
plots: [{
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
details: [{ field: 'Region' }],
},
config: {
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}, {
type: GC.Spread.Sheets.DataCharts.DataChartType.area,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
},
config: {
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}],
config: {
header: {
title: 'Column + Area',
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
},
});
const sheet2 = spread.getSheet(1);
sheet2.name('Multiple Axes');
const dataChart21 = sheet2.dataCharts.add('chart21', 20, 20, 450, 300);
dataChart21.setChartConfig({
tableName: 'Sales',
plots: [{
name: 'p1',
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
details: [{ field: 'Region' }],
},
config: {
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}, {
name: 'p2',
type: GC.Spread.Sheets.DataCharts.DataChartType.line,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
},
config: {
symbols: true,
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}],
config: {
header: {
title: 'Column + Line',
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
plotAreas: [{
legends: [{
type: GC.Spread.Sheets.DataCharts.LegendType.color,
position: GC.Spread.Sheets.DataCharts.LegendPosition.none,
}],
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.y,
plots: ['p1'],
position: GC.Spread.Sheets.DataCharts.AxisPosition.near,
}, {
type: GC.Spread.Sheets.DataCharts.AxisType.y,
plots: ['p2'],
position: GC.Spread.Sheets.DataCharts.AxisPosition.far,
majorGrid: false,
}],
}],
},
});
const dataChart22 = sheet2.dataCharts.add('chart22', 490, 20, 450, 300);
dataChart22.setChartConfig({
tableName: 'Sales',
plots: [{
name: 'p1',
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
},
config: {
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}, {
name: 'p2',
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Return', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
},
config: {
palette: ['#5ca4e5'],
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}],
config: {
header: {
title: 'Column + Column',
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.y,
plots: ['p1'],
position: GC.Spread.Sheets.DataCharts.AxisPosition.near,
}, {
type: GC.Spread.Sheets.DataCharts.AxisType.y,
plots: ['p2'],
position: GC.Spread.Sheets.DataCharts.AxisPosition.far,
majorGrid: false,
max: 600,
}],
}],
},
});
const dataChart23 = sheet2.dataCharts.add('chart23', 20, 340, 450, 300);
dataChart23.setChartConfig({
tableName: 'Sales',
plots: [{
name: 'p1',
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
},
config: {
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}, {
name: 'p2',
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Return', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
},
config: {
palette: ['#5ca4e5'],
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}, {
name: 'p3',
type: GC.Spread.Sheets.DataCharts.DataChartType.line,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
},
config: {
palette: ['#7783c4'],
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}],
config: {
header: {
title: 'Column + Column + Line',
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.y,
plots: ['p1'],
position: GC.Spread.Sheets.DataCharts.AxisPosition.near,
}, {
type: GC.Spread.Sheets.DataCharts.AxisType.y,
plots: ['p2'],
position: GC.Spread.Sheets.DataCharts.AxisPosition.far,
majorGrid: false,
max: 600,
}, {
type: GC.Spread.Sheets.DataCharts.AxisType.y,
plots: ['p3'],
position: GC.Spread.Sheets.DataCharts.AxisPosition.far,
majorGrid: false,
}],
}],
},
});
const dataChart24 = sheet2.dataCharts.add('chart24', 490, 340, 450, 300);
dataChart24.setChartConfig({
tableName: 'Sales',
plots: [{
name: 'p1',
type: GC.Spread.Sheets.DataCharts.DataChartType.column,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
details: [{ field: 'Region' }],
},
config: {
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}, {
name: 'p2',
type: GC.Spread.Sheets.DataCharts.DataChartType.area,
encodings: {
values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
category: { field: 'Product' },
},
config: {
tooltip: [{
style: {
fill: { type: 'CssColor', color: '#ffffff' },
stroke: { type: 'CssColor', color: '#e0e0e0' },
strokeWidth: 1,
},
textStyle: {
fontSize: 12,
},
}],
},
}],
config: {
header: {
title: 'Column + Area',
padding: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
textStyle: {
fontSize: 19,
fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
alignment: GC.Spread.Sheets.DataCharts.HAlign.left,
},
},
plotAreas: [{
axes: [{
type: GC.Spread.Sheets.DataCharts.AxisType.y,
plots: ['p1'],
position: GC.Spread.Sheets.DataCharts.AxisPosition.near,
}, {
type: GC.Spread.Sheets.DataCharts.AxisType.y,
plots: ['p2'],
position: GC.Spread.Sheets.DataCharts.AxisPosition.near,
majorGrid: false,
}],
}],
},
});
spread.getActiveSheet().dataCharts.all()[0].isSelected(true);
if (designer) {
designer.refresh();
}
}
function createSpreadAndDesigner() {
const demoHost = document.getElementById('demo-host');
if (window !== top) {
const spread = new GC.Spread.Sheets.Workbook('spread-host', { sheetCount: 1 });
new GC.Spread.Sheets.DataCharts.DataChartConfigPanel('panel-host', spread);
return {
spread
}
} else {
const designer = new GC.Spread.Sheets.Designer.Designer(demoHost, undefined, undefined, { sheetCount: 1 });
return {
designer,
spread: designer.getWorkbook(),
}
}
}
async function initDataManager(spread) {
const records = [
['2021', 'East China', 'SunLin', 'Drinks', 'Apple Juice', 140, 9],
['2021', 'East China', 'JinShiPeng', 'Drinks', 'Apple Juice', 290, 17],
['2021', 'East China', 'ZhangShang', 'Drinks', 'Apple Juice', 300, 28],
['2021', 'East China', 'SunYang', 'Drinks', 'Apple Juice', 120, 10],
['2021', 'East China', 'YuanChengJie', 'Drinks', 'Apple Juice', 220, 15],
['2021', 'North China', 'ZhangYing', 'Drinks', 'Apple Juice', 250.0, 23],
['2021', 'North China', 'WangWei', 'Drinks', 'Apple Juice', 180.0, 17],
['2021', 'North China', 'ZhangWu', 'Drinks', 'Apple Juice', 233.0, 23],
['2021', 'North China', 'HanWen', 'Drinks', 'Apple Juice', 123.0, 12],
['2021', 'East China', 'SunLin', 'Drinks', 'Milk', 431.0, 38],
['2021', 'East China', 'JinShiPeng', 'Drinks', 'Milk', 635.0, 56],
['2021', 'East China', 'ZhangShang', 'Drinks', 'Milk', 324.0, 33],
['2021', 'East China', 'SunYang', 'Drinks', 'Milk', 644.0, 68],
['2021', 'East China', 'YuanChengJie', 'Drinks', 'Milk', 343.0, 19],
['2021', 'North China', 'ZhangYing', 'Drinks', 'Milk', 234.0, 13],
['2021', 'North China', 'WangWei', 'Drinks', 'Milk', 666.0, 39],
['2021', 'North China', 'ZhangWu', 'Drinks', 'Milk', 700.0, 77],
['2021', 'North China', 'HanWen', 'Drinks', 'Milk', 111.0, 8],
['2021', 'East China', 'SunLin', 'Drinks', 'Orange Juice', 176.0, 18],
['2021', 'East China', 'JinShiPeng', 'Drinks', 'Orange Juice', 500.0, 20],
['2021', 'East China', 'ZhangShang', 'Drinks', 'Orange Juice', 340.0, 19],
['2021', 'East China', 'SunYang', 'Drinks', 'Orange Juice', 540.0, 45],
['2021', 'East China', 'YuanChengJie', 'Drinks', 'Orange Juice', 563.0, 56],
['2021', 'North China', 'ZhangYing', 'Drinks', 'Orange Juice', 300.0, 19],
['2021', 'North China', 'WangWei', 'Drinks', 'Orange Juice', 490.0, 44],
['2021', 'North China', 'ZhangWu', 'Drinks', 'Orange Juice', 233.0, 25],
['2021', 'North China', 'HanWen', 'Drinks', 'Orange Juice', 760.0, 78],
['2021', 'East China', 'SunLin', 'Dessert', 'Chocolate', 333.0, 32],
['2021', 'East China', 'JinShiPeng', 'Dessert', 'Chocolate', 420.0, 46],
['2021', 'East China', 'ZhangShang', 'Dessert', 'Chocolate', 318.0, 37],
['2021', 'East China', 'SunYang', 'Dessert', 'Chocolate', 256.0, 21],
['2021', 'East China', 'YuanChengJie', 'Dessert', 'Chocolate', 583.0, 54],
['2021', 'North China', 'ZhangYing', 'Dessert', 'Chocolate', 352.0, 33],
['2021', 'North China', 'WangWei', 'Dessert', 'Chocolate', 384.0, 39],
['2021', 'North China', 'ZhangWu', 'Dessert', 'Chocolate', 435.0, 42],
['2021', 'North China', 'HanWen', 'Dessert', 'Chocolate', 356.0, 36],
['2021', 'East China', 'SunLin', 'Dessert', 'Beef Jerky', 789.0, 73],
['2021', 'East China', 'JinShiPeng', 'Dessert', 'Beef Jerky', 156.0, 14],
['2021', 'East China', 'ZhangShang', 'Dessert', 'Beef Jerky', 289.0, 23],
['2021', 'East China', 'SunYang', 'Dessert', 'Beef Jerky', 562.0, 45],
['2021', 'East China', 'YuanChengJie', 'Dessert', 'Beef Jerky', 546.0, 56],
['2021', 'North China', 'ZhangYing', 'Dessert', 'Beef Jerky', 218.0, 17],
['2021', 'North China', 'WangWei', 'Dessert', 'Beef Jerky', 541.0, 56],
['2021', 'North China', 'ZhangWu', 'Dessert', 'Beef Jerky', 219.0, 21],
['2021', 'North China', 'HanWen', 'Dessert', 'Beef Jerky', 345.0, 21],
];
const columns = ['Year', 'Region', 'Salesman', 'ProductCategory', 'Product', 'Sales', 'Return'];
await spread.dataManager().addTable('Sales', {
data: records.map(record => {
const item = {};
columns.forEach((column, index) => {
item[column] = record[index];
});
return item;
}),
}).fetch();
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.light.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-datacharts-addon/dist/gc.spread.sheets.datacharts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script>
const designerDependencyScripts = [
'$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js',
'$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js',
'$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js',
'$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js',
'$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js',
'$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-reportsheet-addon/dist/gc.spread.report.reportsheet.min.js',
'$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-ganttsheet/dist/gc.spread.sheets.ganttsheet.min.js',
'$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js',
'$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-io/dist/gc.spread.sheets.io.min.js',
'$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-designer-resources-en/dist/gc.spread.sheets.designer.resource.en.min.js',
'$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js',
'$DEMOROOT$/spread/source/js/designer/license.js',
]
function appendScriptNode (src) {
const script = document.createElement('script');
script.src = src;
script.async = false;
script.type = 'text/javascript';
document.head.appendChild(script);
}
if (top === window) { // not in iframe
designerDependencyScripts.forEach(appendScriptNode);
}
</script>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<div class="sample-tutorial">
<div id="demo-host">
<div id="spread-host"></div>
<div id="panel-host"></div>
</div>
</div>
</body>
</html>
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
#demo-host {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
#spread-host {
position: absolute;
top: 0;
left: 0;
width: calc(100% - 380px);
height: 100%;
}
#panel-host {
position: absolute;
top: 0;
right: 0;
width: 380px;
height: 100%;
}
