Area Graph
You can resize the image using the handle that appears when you mouse over the south and east sides of the canvas. You maybe wondering why sometimes it resizes to where you released the mouse button and sometimes it does not. The reason is because of the 'autoExtend' property which is a feature (not a bug). If you set the autoExtent to 'false', then it resizes to where you release your mouse button.
new CanvasXpress('canvas1',
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D1', 'D1', 'D2', 'D2', 'D2', 'D2'],
Time: ['1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour']},
y: {vars: ['Gene1 is a very long name', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6'],
smps: ['Smp1 name is very long', 'Smp2', 'Smp3 is also long', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 73, 42, 64],
[12, 4, 60, 5, 24, 14, 32, 13],
[7, 12, 20, 13, 49, 52, 42, 92],
[21, 10, 30, 8, 65, 166, 47, 58],
[15, 14, 100, 5, 34, 30, 82, 51],
[100, 82, 73, 4, 3, 4, 5, 2]]}},
{graphType: 'Area',
graphOrientation: 'vertical',
title: 'Area Graph',
transparency: 0.6,
colorScheme: 'basic',
maxSmpStringLen: 8,
maxVarStringLen: 13});
new CanvasXpress('canvas2',
{x: {Tissue: ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver'],
Donor: ['D1', 'D1', 'D1', 'D1', 'D2', 'D2', 'D2', 'D2'],
Time: ['1hour', '1hour', '2hour', '2hour', '1hour', '1hour', '2hour', '2hour']},
y: {vars: ['Gene1 is a very long name', 'Gene2', 'Gene3', 'Gene4', 'Gene5', 'Gene6'],
smps: ['Smp1 name is very long', 'Smp2', 'Smp3 is also long', 'Smp4', 'Smp5', 'Smp6', 'Smp7', 'Smp8'],
desc: ['Intensity'],
data: [[10, 12, 3, 4, 100, 73, 42, 64],
[12, 4, 60, 5, 24, 14, 32, 13],
[7, 12, 20, 13, 49, 52, 42, 92],
[21, 10, 30, 8, 65, 166, 47, 58],
[15, 14, 100, 5, 34, 30, 82, 51],
[100, 82, 73, 4, 3, 4, 5, 2]]}},
{graphType: 'Area',
gradient: true,
transparency: 0.6,
graphOrientation: 'horizontal',
showLegend: false,
autoExtend: true});