Stacked 100% Area

This sample shows how to display a stacked area 100% FlexChart. This is done by setting the stacking property to Stacked100pc. This will set the chart to display how each value contributes to the total with the relative size of each series representing its contribution to the total.

Learn about FlexChart | FlexChart API Reference

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as chart from '@grapecity/wijmo.chart'; import * as animation from '@grapecity/wijmo.chart.animation'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let linechart = new chart.FlexChart('#chart', { stacking: chart.Stacking.Stacked100pc, chartType: chart.ChartType.Area, bindingX: 'year', series: [ { binding: 'africa', name: 'Africa' }, { binding: 'oceania', name: 'Oceania' }, { binding: 'asia', name: 'Asia' }, { binding: 'europe', name: 'Europe' }, { binding: 'southAmerica', name: 'South America' }, { binding: 'northAmerica', name: 'North America' } ], axisY: { title: 'Populations' }, itemsSource: getData(), palette: getRandomPalette() }); // let ani = new animation.ChartAnimation(linechart); } // function getRandomPalette() { let palettes = Object.getOwnPropertyNames(chart.Palettes) .filter(prop => typeof chart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return chart.Palettes[palettes[rand]]; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Stacked 100% Area</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="chart"></div> </div> </body> </html>
// World Population // https://en.wikipedia.org/wiki/World_population export function getData() { return [ { year: '1950', africa: 229, asia: 1394, europe: 549, southAmerica: 169, northAmerica: 172, oceania: 12.7 }, { year: '1955', africa: 254, asia: 1534, europe: 577, southAmerica: 193, northAmerica: 187, oceania: 14.2 }, { year: '1960', africa: 285, asia: 1687, europe: 606, southAmerica: 221, northAmerica: 204, oceania: 15.8 }, { year: '1965', africa: 322, asia: 1875, europe: 635, southAmerica: 254, northAmerica: 219, oceania: 17.5 }, { year: '1970', africa: 366, asia: 2120, europe: 657, southAmerica: 288, northAmerica: 231, oceania: 19.7 }, { year: '1975', africa: 416, asia: 2378, europe: 677, southAmerica: 326, northAmerica: 242, oceania: 21.5 }, { year: '1980', africa: 478, asia: 2626, europe: 694, southAmerica: 365, northAmerica: 254, oceania: 23 }, { year: '1985', africa: 550, asia: 2897, europe: 708, southAmerica: 406, northAmerica: 267, oceania: 24.9 }, { year: '1990', africa: 632, asia: 3202, europe: 721, southAmerica: 447, northAmerica: 281, oceania: 27 }, { year: '1995', africa: 720, asia: 3475, europe: 728, southAmerica: 487, northAmerica: 296, oceania: 29.1 }, { year: '2000', africa: 814, asia: 3714, europe: 726, southAmerica: 527, northAmerica: 314, oceania: 31.1 }, { year: '2005', africa: 920, asia: 3945, europe: 729, southAmerica: 564, northAmerica: 329, oceania: 33.4 }, { year: '2010', africa: 1044, asia: 4170, europe: 735, southAmerica: 600, northAmerica: 344, oceania: 36.4 }, { year: '2015', africa: 1196, asia: 4393, europe: 738, southAmerica: 634, northAmerica: 358, oceania: 39.3 } ]; }
body { margin-bottom: 24px; } .wj-flexchart .wj-chart-linemarker { background: transparent; } .wj-chart-linemarker-content { padding: 12px; margin: 6px; background: white; border-radius: 3px; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .wj-flexchart .wj-chart-linemarker .wj-chart-linemarker-hline, .wj-flexchart .wj-chart-linemarker .wj-chart-linemarker-vline { height: 1px; width: 1px; opacity: 0.5; background: navy; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.transposedmultirow': 'npm:@grapecity/wijmo.grid.transposedmultirow/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.pdf.security': 'npm:@grapecity/wijmo.pdf.security/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/index.js', '@grapecity/wijmo.barcode': 'npm:@grapecity/wijmo.barcode/index.js', '@grapecity/wijmo.barcode.common': 'npm:@grapecity/wijmo.barcode.common/index.js', '@grapecity/wijmo.barcode.composite': 'npm:@grapecity/wijmo.barcode.composite/index.js', '@grapecity/wijmo.barcode.specialized': 'npm:@grapecity/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);