Styling Series

The FlexChart automatically picks colors for each series based on a default palette, which you can override by setting the palette property.

You can also override the default style settings for each series by setting the style and symbolStyle properties of any series to an object that specifies SVG styling attributes, including fill, stroke, strokeThickness, and so on.

The Series.style property is an exception to the general rule that all styling in Wijmo is done through CSS. This is because many charts have dynamic series, which would be impossible to style in advance.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjChart from '@grapecity/wijmo.chart'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create the chart let theChart = new wjChart.FlexChart('#theChart', { header: 'Country GDP', itemsSource: getData(), bindingX: 'country', series: [ { binding: '2014', name: '2014', style: { fill: 'green', stroke: 'darkgreen', strokeWidth: 1 } }, { binding: '2015', name: '2015', style: { fill: 'red', stroke: 'darkred', strokeWidth: 1 } }, { binding: '2016', name: '2016', chartType: 'LineSymbols', style: { stroke: 'orange', strokeWidth: 5 }, symbolStyle: { fill: 'gold', stroke: 'gold' } } ] }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Styling Series</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="theChart"></div> </div> </body> </html> // list of country GDP // https://en.wikipedia.org/wiki/List_of_IMF_ranked_countries_by_GDP export function getData() { return [ { country: 'United States', '2014': 17348075, '2015': 18036650, '2016': 18624450 }, { country: 'China', '2014': 10356508, '2015': 11181556, '2016': 11232110 }, { country: 'Japan', '2014': 4602367, '2015': 4124211, '2016': 4936540 }, { country: 'Germany', '2014': 3874437, '2015': 3365293, '2016': 3479230 }, { country: 'United Kingdom', '2014': 2950039, '2015': 2858482, '2016': 2629190 }, { country: 'France', '2014': 2833687, '2015': 2420163, '2016': 2466470 }, { country: 'India', '2014': 2051228, '2015': 2073002, '2016': 2263790 }, { country: 'Italy', '2014': 2147744, '2015': 1815759, '2016': 1850740 } ]; } .wj-flexgrid { height: 150px; margin-top:10px; } .wj-flexchart { height: 300px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // 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 { DataService } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } } // @NgModule({ imports: [WjChartModule, 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 Styling Series</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"> <div class="form-group"> <wj-flex-chart header="Country GDP" [itemsSource]="data" bindingX="country"> <wj-flex-chart-series binding="2014" name="2014" [style]="{fill:'green',stroke:'darkgreen',strokeWidth:1}"></wj-flex-chart-series> <wj-flex-chart-series binding="2015" name="2015" [style]="{fill:'red',stroke:'darkred',strokeWidth:1}"></wj-flex-chart-series> <wj-flex-chart-series binding="2016" name="2016" chartType="LineSymbols" [style]="{stroke:'orange',strokeWidth:5}" [symbolStyle]="{fill:'gold',stroke:'gold'}"></wj-flex-chart-series> </wj-flex-chart> </div> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { // list of country GDP // https://en.wikipedia.org/wiki/List_of_IMF_ranked_countries_by_GDP return [ { country: 'United States', '2014': 17348075, '2015': 18036650, '2016': 18624450 }, { country: 'China', '2014': 10356508, '2015': 11181556, '2016': 11232110 }, { country: 'Japan', '2014': 4602367, '2015': 4124211, '2016': 4936540 }, { country: 'Germany', '2014': 3874437, '2015': 3365293, '2016': 3479230 }, { country: 'United Kingdom', '2014': 2950039, '2015': 2858482, '2016': 2629190 }, { country: 'France', '2014': 2833687, '2015': 2420163, '2016': 2466470 }, { country: 'India', '2014': 2051228, '2015': 2073002, '2016': 2263790 }, { country: 'Italy', '2014': 2147744, '2015': 1815759, '2016': 1850740 } ]; } } body { margin-bottom: 24px; } label { margin-right: 3px; } <template> <div class="container-fluid"> <div class="form-group"> <wj-flex-chart header="Country GDP" :itemsSource="data" bindingX="country"> <wj-flex-chart-series binding="2014" name="2014" :style="{fill:'green',stroke:'darkgreen',strokeWidth:1}"></wj-flex-chart-series> <wj-flex-chart-series binding="2015" name="2015" :style="{fill:'red',stroke:'darkred',strokeWidth:1}"></wj-flex-chart-series> <wj-flex-chart-series binding="2016" name="2016" chartType="LineSymbols" :style="{stroke:'orange',strokeWidth:5}" :symbolStyle="{fill:'gold',stroke:'gold'}"></wj-flex-chart-series> </wj-flex-chart> </div> </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 { getData } from './data'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData() } } }) 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 Styling Series</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> // list of country GDP // https://en.wikipedia.org/wiki/List_of_IMF_ranked_countries_by_GDP export function getData() { return [ { country: 'United States', '2014': 17348075, '2015': 18036650, '2016': 18624450 }, { country: 'China', '2014': 10356508, '2015': 11181556, '2016': 11232110 }, { country: 'Japan', '2014': 4602367, '2015': 4124211, '2016': 4936540 }, { country: 'Germany', '2014': 3874437, '2015': 3365293, '2016': 3479230 }, { country: 'United Kingdom', '2014': 2950039, '2015': 2858482, '2016': 2629190 }, { country: 'France', '2014': 2833687, '2015': 2420163, '2016': 2466470 }, { country: 'India', '2014': 2051228, '2015': 2073002, '2016': 2263790 }, { country: 'Italy', '2014': 2147744, '2015': 1815759, '2016': 1850740 } ]; } import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import "./app.css"; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wjChart from "@grapecity/wijmo.react.chart"; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <div className="form-group"> <wjChart.FlexChart header="Country GDP" itemsSource={this.state.data} bindingX="country"> <wjChart.FlexChartSeries binding="2014" name="2014" style={{ fill: 'green', stroke: 'darkgreen', strokeWidth: 1 }}> </wjChart.FlexChartSeries> <wjChart.FlexChartSeries binding="2015" name="2015" style={{ fill: 'red', stroke: 'darkred', strokeWidth: 1 }}> </wjChart.FlexChartSeries> <wjChart.FlexChartSeries binding="2016" name="2016" chartType="LineSymbols" style={{ stroke: 'orange', strokeWidth: 5 }} symbolStyle={{ fill: 'gold', stroke: 'gold' }}> </wjChart.FlexChartSeries> </wjChart.FlexChart> </div> </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>Grapecity Wijmo OLAP Pivot Chart Overview</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; } label { margin-right: 3px; } // list of country GDP // https://en.wikipedia.org/wiki/List_of_IMF_ranked_countries_by_GDP export function getData() { return [ { country: 'United States', '2014': 17348075, '2015': 18036650, '2016': 18624450 }, { country: 'China', '2014': 10356508, '2015': 11181556, '2016': 11232110 }, { country: 'Japan', '2014': 4602367, '2015': 4124211, '2016': 4936540 }, { country: 'Germany', '2014': 3874437, '2015': 3365293, '2016': 3479230 }, { country: 'United Kingdom', '2014': 2950039, '2015': 2858482, '2016': 2629190 }, { country: 'France', '2014': 2833687, '2015': 2420163, '2016': 2466470 }, { country: 'India', '2014': 2051228, '2015': 2073002, '2016': 2263790 }, { country: 'Italy', '2014': 2147744, '2015': 1815759, '2016': 1850740 } ]; }