Column With Axis Range

The FlexChart calculates axis ranges automatically, based on the data being shown. Because of this, in most cases you don't have to worry about setting the axis min, max, majorUnit, or minorUnit properties. In a few cases, however, setting these values explicitly may improve the chart.

The sample shows a column chart with custom Y axis range.

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 barchart = new chart.FlexChart('#chart', { header: 'World Population(in millions)', legend: { position: chart.Position.None }, bindingX: 'year', axisY: { min: 4000 }, series: [{ binding: 'population', name: 'Population' }], itemsSource: getData(), palette: getRandomPalette() }); // let ani = new animation.ChartAnimation(barchart); } // 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 Column With Axis Range</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: '1975', population: 4061 }, { year: '1980', population: 4440 }, { year: '1985', population: 4853 }, { year: '1990', population: 5310 }, { year: '1995', population: 5735 }, { year: '2000', population: 6127 }, { year: '2005', population: 6520 }, { year: '2010', population: 6930 }, { year: '2015', population: 7349 } ]; } body { margin-bottom: 24px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as chart from '@grapecity/wijmo.chart'; // import { Component, Inject, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { WjChartAnimationModule } from '@grapecity/wijmo.angular2.chart.animation'; import { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; palette: string[]; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.palette = this.getRandomPalette(); } // getRandomPalette(): string[] { 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]]; } } // @NgModule({ imports: [WjChartModule, WjChartAnimationModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Basic Column Chart</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <wj-flex-chart [header]="'World Population(in millions)'" [bindingX]="'year'" [itemsSource]="data" [palette]="palette"> <wj-flex-chart-legend [position]="'None'"> </wj-flex-chart-legend> <wj-flex-chart-axis [wjProperty]="'axisY'" [min]="4000"> </wj-flex-chart-axis> <wj-flex-chart-series [name]="'Population'" [binding]="'population'"> </wj-flex-chart-series> <wj-flex-chart-animation></wj-flex-chart-animation> </wj-flex-chart> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { // World Population // https://en.wikipedia.org/wiki/World_population getData() { return [ { year: '1975', population: 4061 }, { year: '1980', population: 4440 }, { year: '1985', population: 4853 }, { year: '1990', population: 5310 }, { year: '1995', population: 5735 }, { year: '2000', population: 6127 }, { year: '2005', population: 6520 }, { year: '2010', population: 6930 }, { year: '2015', population: 7349 } ]; } } body { margin-bottom: 24px; } <template> <div class="container-fluid"> <wj-flex-chart header="World Population(in millions)" bindingX="year" :itemsSource="data" :palette="palette"> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisY" :min="4000"></wj-flex-chart-axis> <wj-flex-chart-series name="Population" binding="population"></wj-flex-chart-series> <wj-flex-chart-animation></wj-flex-chart-animation> </wj-flex-chart> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.chart'; import '@grapecity/wijmo.vue2.chart.animation'; import { getData } from './data'; import * as wjChart from '@grapecity/wijmo.chart'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData(), palette: this.getRandomPalette() } }, methods: { getRandomPalette: function() { let palettes = Object.getOwnPropertyNames(wjChart.Palettes) .filter(prop => typeof wjChart.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return wjChart.Palettes[palettes[rand]]; } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> body { margin-bottom: 24px; } label { margin-right: 3px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Basic Column Chart</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.vue'); </script> </head> <body> <div id="app"></div> </body> </html> // World Population // https://en.wikipedia.org/wiki/World_population export function getData() { return [ { year: '1975', population: 4061 }, { year: '1980', population: 4440 }, { year: '1985', population: 4853 }, { year: '1990', population: 5310 }, { year: '1995', population: 5735 }, { year: '2000', population: 6127 }, { year: '2005', population: 6520 }, { year: '2010', population: 6930 }, { year: '2015', population: 7349 } ]; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjChart from '@grapecity/wijmo.react.chart'; import * as wjCharts from '@grapecity/wijmo.chart'; import * as wjChartAnimate from '@grapecity/wijmo.react.chart.animation'; import { getData } from './data'; // class App extends React.Component { constructor(props) { super(props); this.getRandomPalette = () => { let palettes = Object.getOwnPropertyNames(wjCharts.Palettes) .filter(prop => typeof wjCharts.Palettes[prop] === "object" && prop !== 'prototype'); let rand = Math.floor(Math.random() * palettes.length); // return wjCharts.Palettes[palettes[rand]]; }; this.state = { data: getData(), palette: this.getRandomPalette() }; } ; render() { return <div className="container-fluid"> <wjChart.FlexChart header="World Population(in millions)" bindingX="year" itemsSource={this.state.data} palette={this.state.palette}> <wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend> <wjChart.FlexChartAxis wjProperty="axisY" min={4000}></wjChart.FlexChartAxis> <wjChart.FlexChartSeries name="Population" binding="population"></wjChart.FlexChartSeries> <wjChartAnimate.FlexChartAnimation></wjChartAnimate.FlexChartAnimation> </wjChart.FlexChart> </div>; } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</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 id="app"></div> </body> </html> body { margin-bottom: 24px; } // Comparison of imports vs exports of the United States // https://en.wikipedia.org/wiki/Comparison_of_imports_vs_exports_of_the_United_States export function getData() { return [ { year: '1975', population: 4061 }, { year: '1980', population: 4440 }, { year: '1985', population: 4853 }, { year: '1990', population: 5310 }, { year: '1995', population: 5735 }, { year: '2000', population: 6127 }, { year: '2005', population: 6520 }, { year: '2010', population: 6930 }, { year: '2015', population: 7349 } ]; }