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 '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; import { isArray } from '@mescius/wijmo'; import { FlexChart, ChartType, Stacking, Palettes } from '@mescius/wijmo.chart'; import * as animation from '@mescius/wijmo.chart.animation'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let chart = new FlexChart('#chart', { stacking: Stacking.Stacked100pc, chartType: 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(chart); } // function getRandomPalette() { let palettes = Object.keys(Palettes).filter(prop => isArray(Palettes[prop])); let rand = Math.floor(Math.random() * palettes.length); // return Palettes[palettes[rand]]; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexChart Stacked 100% Area</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></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', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/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);