Gridlines and Tickmarks

By default, the FlexChart uses horizontal lines to show the x-axis and major gridlines along the y-axis. This makes charts clean and easy-to-read.

You can change this by modifying the axisX and axisY properties. This example shows how you create and control major and minor gridlines along both axes, and how to customize them using CSS.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjChart from '@grapecity/wijmo.chart'; import * as wjCore from '@grapecity/wijmo'; import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create the chart let theChart = new wjChart.FlexChart('#theChart', { axisX: { format: 'MMM dd', majorGrid: true, majorTickMarks: 'Cross', majorUnit: 7, minorGrid: true, minorTickMarks: 'None', minorUnit: 1, }, axisY: { min: 790, max: 860, format: 'c0', axisLine: true, majorGrid: true, majorTickMarks: 'Cross', majorUnit: 20, minorGrid: true, minorTickMarks: 'None', minorUnit: 5, }, itemsSource: getData(), bindingX: 'date', chartType: 'Candlestick', series: [ { binding: 'high,low,open,close', name: 'Alphabet Inc' } ], legend: { position: 'None' } }); theChart.palette = getRandomPalette(); // // toggle custom CSS, grid visibility onCheck('customGridlines', (checked) => wjCore.toggleClass(theChart.hostElement, 'custom-gridlines', checked)); onCheck('x-major', (checked) => theChart.axisX.majorGrid = checked); onCheck('x-minor', (checked) => theChart.axisX.minorGrid = checked); onCheck('y-major', (checked) => theChart.axisY.majorGrid = checked); onCheck('y-minor', (checked) => theChart.axisY.minorGrid = checked); // onCheck('customUnits', (checked) => { if (checked) { theChart.axisX.majorUnit = 7; theChart.axisX.minorUnit = 1; theChart.axisY.majorUnit = 20; theChart.axisY.minorUnit = 5; } else { theChart.axisX.majorUnit = null; theChart.axisX.minorUnit = null; theChart.axisY.majorUnit = null; theChart.axisY.minorUnit = null; } }); // function onCheck(id, fn) { document.getElementById(id).addEventListener('click', e => { fn(e.target.checked); }); } } // function getRandomPalette() { 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]]; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Gridlines and Tickmarks</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"> <h4> Gridlines </h4> <div class="row"> <div class="col-xs-4"> <label> <input id="customGridlines" type="checkbox" checked="checked"> Custom CSS </label><br /> <label> <input id="customUnits" type="checkbox" checked="checked"> Custom Units </label> </div> <div class="col-xs-4"> <label> <input id="x-major" type="checkbox" checked="checked"> X Major </label><br /> <label> <input id="x-minor" type="checkbox" checked="checked"> X Minor </label> </div> <div class="col-xs-4"> <label> <input id="y-major" type="checkbox" checked="checked"> Y Major </label><br /> <label> <input id="y-minor" type="checkbox" checked="checked"> Y Minor </label> </div> </div> <div id="theChart" class="custom-gridlines"></div> </div> </body> </html> // some stock data from Google Finance export function getData() { return [ { date: new Date(2017, 2, 17), open: 851.61, high: 853.4, low: 847.11, close: 852.12, vol: 1716471 }, { date: new Date(2017, 2, 16), open: 849.03, high: 850.85, low: 846.13, close: 848.78, vol: 977560 }, { date: new Date(2017, 2, 15), open: 847.59, high: 848.63, low: 840.77, close: 847.2, vol: 1381474 }, { date: new Date(2017, 2, 14), open: 843.64, high: 847.24, low: 840.8, close: 845.62, vol: 780198 }, { date: new Date(2017, 2, 13), open: 844, high: 848.68, low: 843.25, close: 845.54, vol: 1223647 }, { date: new Date(2017, 2, 10), open: 843.28, high: 844.91, low: 839.5, close: 843.25, vol: 1704024 }, { date: new Date(2017, 2, 9), open: 836, high: 842, low: 834.21, close: 838.68, vol: 1261517 }, { date: new Date(2017, 2, 8), open: 833.51, high: 838.15, low: 831.79, close: 835.37, vol: 989773 }, { date: new Date(2017, 2, 7), open: 827.4, high: 833.41, low: 826.52, close: 831.91, vol: 1037630 }, { date: new Date(2017, 2, 6), open: 826.95, high: 828.88, low: 822.4, close: 827.78, vol: 1109037 }, { date: new Date(2017, 2, 3), open: 830.56, high: 831.36, low: 825.75, close: 829.08, vol: 896378 }, { date: new Date(2017, 2, 2), open: 833.85, high: 834.51, low: 829.64, close: 830.63, vol: 942476 }, { date: new Date(2017, 2, 1), open: 828.85, high: 836.26, low: 827.26, close: 835.24, vol: 1496540 }, { date: new Date(2017, 1, 28), open: 825.61, high: 828.54, low: 820.2, close: 823.21, vol: 2260769 }, { date: new Date(2017, 1, 27), open: 824.55, high: 830.5, low: 824, close: 829.28, vol: 1101466 }, { date: new Date(2017, 1, 24), open: 827.73, high: 829, low: 824.2, close: 828.64, vol: 1392202 }, { date: new Date(2017, 1, 23), open: 830.12, high: 832.46, low: 822.88, close: 831.33, vol: 1472771 }, { date: new Date(2017, 1, 22), open: 828.66, high: 833.25, low: 828.64, close: 830.76, vol: 987248 }, { date: new Date(2017, 1, 21), open: 828.66, high: 833.45, low: 828.35, close: 831.66, vol: 1262337 }, { date: new Date(2017, 1, 17), open: 823.02, high: 828.07, low: 821.66, close: 828.07, vol: 1611039 }, { date: new Date(2017, 1, 16), open: 819.93, high: 824.4, low: 818.98, close: 824.16, vol: 1287626 }, { date: new Date(2017, 1, 15), open: 819.36, high: 823, low: 818.47, close: 818.98, vol: 1313617 }, { date: new Date(2017, 1, 14), open: 819, high: 823, low: 816, close: 820.45, vol: 1054732 }, { date: new Date(2017, 1, 13), open: 816, high: 820.96, low: 815.49, close: 819.24, vol: 1213324 }, { date: new Date(2017, 1, 10), open: 811.7, high: 815.25, low: 809.78, close: 813.67, vol: 1134976 }, { date: new Date(2017, 1, 9), open: 809.51, high: 810.66, low: 804.54, close: 809.56, vol: 990391 }, { date: new Date(2017, 1, 8), open: 807, high: 811.84, low: 803.19, close: 808.38, vol: 1155990 }, { date: new Date(2017, 1, 7), open: 803.99, high: 810.5, low: 801.78, close: 806.97, vol: 1241221 }, { date: new Date(2017, 1, 6), open: 799.7, high: 801.67, low: 795.25, close: 801.34, vol: 1184483 }, { date: new Date(2017, 1, 3), open: 802.99, high: 806, low: 800.37, close: 801.49, vol: 1463448 } ]; } .wj-flexchart { height: 300px; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-tick, .custom-gridlines.wj-flexchart .wj-axis-y .wj-tick { stroke: darkgreen; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline, .custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline { opacity: .25; stroke: darkgreen; stroke-width: 1px; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline-minor, .custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline-minor { opacity: .25; stroke: darkgreen; stroke-dasharray: 0; stroke-width: .25px; } .wj-control { margin-bottom: 6px; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import { Component, Inject, enableProdMode, NgModule, ViewChild } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { WjChartModule } from '@grapecity/wijmo.angular2.chart'; import { DataService } from './app.data'; import * as wjCore from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.chart'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; palette: any; @ViewChild('theChart') theChart: wjChart.FlexChart; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); this.palette = this.getRandomPalette(); } // getRandomPalette() { 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]]; } // customGridLine(cb: HTMLInputElement) { wjCore.toggleClass(this.theChart.hostElement, 'custom-gridlines', cb.checked); } // customUnits(cu: HTMLInputElement) { let theChart = this.theChart; if (cu.checked) { theChart.axisX.majorUnit = 7; theChart.axisX.minorUnit = 1; theChart.axisY.majorUnit = 20; theChart.axisY.minorUnit = 5; } else { theChart.axisX.majorUnit = null; theChart.axisX.minorUnit = null; theChart.axisY.majorUnit = null; theChart.axisY.minorUnit = null; } } } // @NgModule({ imports: [WjChartModule, FormsModule, 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 Gridlines and Tickmarks</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"> <h4> Gridlines </h4> <div class="row"> <div class="col-xs-4"> <label> <input #cgl id="customGridlines" type="checkbox" (change)="customGridLine(cgl)"> Custom CSS </label><br /> <label> <input #cu id="customUnits" type="checkbox" checked="checked" (change)="customUnits(cu)"> Custom Units </label> </div> <div class="col-xs-4"> <label> <input #xmajor id="x-major" type="checkbox" checked="checked" (change)="theChart.axisX.majorGrid=xmajor.checked"> X Major </label><br /> <label> <input #xminor id="x-minor" type="checkbox" checked="checked" (change)="theChart.axisX.minorGrid=xminor.checked"> X Minor </label> </div> <div class="col-xs-4"> <label> <input #ymajor id="y-major" type="checkbox" checked="checked" (change)="theChart.axisY.majorGrid=ymajor.checked"> Y Major </label><br /> <label> <input #yminor id="y-minor" type="checkbox" checked="checked" (change)="theChart.axisY.minorGrid=yminor.checked"> Y Minor </label> </div> </div> </div> <div class="form-group"> <wj-flex-chart #theChart [itemsSource]="data" bindingX="date" chartType="Candlestick" [palette]="palette"> <wj-flex-chart-series binding="high,low,open,close" name="Alphabet Inc"></wj-flex-chart-series> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" format="MMM dd" [majorGrid]="true" majorTickMarks="Cross" [axisLine]="true" [majorUnit]="7" [minorGrid]="true" minorTickMarks="None" [minorUnit]="1"></wj-flex-chart-axis> <wj-flex-chart-axis [min]="790" [max]="860" wjProperty="axisY" format="c0" [majorGrid]="true" majorTickMarks="Cross" [majorUnit]="20" [minorGrid]="true" [axisLine]="true" minorTickMarks="None" [minorUnit]="5"></wj-flex-chart-axis> </wj-flex-chart> </div> </div> import { Injectable } from '@angular/core'; // @Injectable() export class DataService { getData() { return [ { date: new Date(2017, 2, 17), open: 851.61, high: 853.4, low: 847.11, close: 852.12, vol: 1716471 }, { date: new Date(2017, 2, 16), open: 849.03, high: 850.85, low: 846.13, close: 848.78, vol: 977560 }, { date: new Date(2017, 2, 15), open: 847.59, high: 848.63, low: 840.77, close: 847.2, vol: 1381474 }, { date: new Date(2017, 2, 14), open: 843.64, high: 847.24, low: 840.8, close: 845.62, vol: 780198 }, { date: new Date(2017, 2, 13), open: 844, high: 848.68, low: 843.25, close: 845.54, vol: 1223647 }, { date: new Date(2017, 2, 10), open: 843.28, high: 844.91, low: 839.5, close: 843.25, vol: 1704024 }, { date: new Date(2017, 2, 9), open: 836, high: 842, low: 834.21, close: 838.68, vol: 1261517 }, { date: new Date(2017, 2, 8), open: 833.51, high: 838.15, low: 831.79, close: 835.37, vol: 989773 }, { date: new Date(2017, 2, 7), open: 827.4, high: 833.41, low: 826.52, close: 831.91, vol: 1037630 }, { date: new Date(2017, 2, 6), open: 826.95, high: 828.88, low: 822.4, close: 827.78, vol: 1109037 }, { date: new Date(2017, 2, 3), open: 830.56, high: 831.36, low: 825.75, close: 829.08, vol: 896378 }, { date: new Date(2017, 2, 2), open: 833.85, high: 834.51, low: 829.64, close: 830.63, vol: 942476 }, { date: new Date(2017, 2, 1), open: 828.85, high: 836.26, low: 827.26, close: 835.24, vol: 1496540 }, { date: new Date(2017, 1, 28), open: 825.61, high: 828.54, low: 820.2, close: 823.21, vol: 2260769 }, { date: new Date(2017, 1, 27), open: 824.55, high: 830.5, low: 824, close: 829.28, vol: 1101466 }, { date: new Date(2017, 1, 24), open: 827.73, high: 829, low: 824.2, close: 828.64, vol: 1392202 }, { date: new Date(2017, 1, 23), open: 830.12, high: 832.46, low: 822.88, close: 831.33, vol: 1472771 }, { date: new Date(2017, 1, 22), open: 828.66, high: 833.25, low: 828.64, close: 830.76, vol: 987248 }, { date: new Date(2017, 1, 21), open: 828.66, high: 833.45, low: 828.35, close: 831.66, vol: 1262337 }, { date: new Date(2017, 1, 17), open: 823.02, high: 828.07, low: 821.66, close: 828.07, vol: 1611039 }, { date: new Date(2017, 1, 16), open: 819.93, high: 824.4, low: 818.98, close: 824.16, vol: 1287626 }, { date: new Date(2017, 1, 15), open: 819.36, high: 823, low: 818.47, close: 818.98, vol: 1313617 }, { date: new Date(2017, 1, 14), open: 819, high: 823, low: 816, close: 820.45, vol: 1054732 }, { date: new Date(2017, 1, 13), open: 816, high: 820.96, low: 815.49, close: 819.24, vol: 1213324 }, { date: new Date(2017, 1, 10), open: 811.7, high: 815.25, low: 809.78, close: 813.67, vol: 1134976 }, { date: new Date(2017, 1, 9), open: 809.51, high: 810.66, low: 804.54, close: 809.56, vol: 990391 }, { date: new Date(2017, 1, 8), open: 807, high: 811.84, low: 803.19, close: 808.38, vol: 1155990 }, { date: new Date(2017, 1, 7), open: 803.99, high: 810.5, low: 801.78, close: 806.97, vol: 1241221 }, { date: new Date(2017, 1, 6), open: 799.7, high: 801.67, low: 795.25, close: 801.34, vol: 1184483 }, { date: new Date(2017, 1, 3), open: 802.99, high: 806, low: 800.37, close: 801.49, vol: 1463448 } ]; } } .wj-flexchart { height: 300px; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-tick, .custom-gridlines.wj-flexchart .wj-axis-y .wj-tick { stroke: darkgreen; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline, .custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline { opacity: .25; stroke: darkgreen; stroke-width: 1px; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline-minor, .custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline-minor { opacity: .25; stroke: darkgreen; stroke-dasharray: 0; stroke-width: .25px; } .wj-control { margin-bottom: 6px; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <div class="form-group"> <h4> Gridlines </h4> <div class="row"> <div class="col-xs-4"> <label> <input id="customGridlines" type="checkbox" v-on:change="customGridLine"> Custom CSS </label><br /> <label> <input id="customUnits" type="checkbox" checked="checked" v-on:change="customUnits"> Custom Units </label> </div> <div class="col-xs-4"> <label> <input id="x-major" type="checkbox" checked="checked" v-on:change="toggleXMajor"> X Major </label><br /> <label> <input id="x-minor" type="checkbox" checked="checked" v-on:change="toggleXMinor"> X Minor </label> </div> <div class="col-xs-4"> <label> <input id="y-major" type="checkbox" checked="checked" v-on:change="toggleYMajor"> Y Major </label><br /> <label> <input id="y-minor" type="checkbox" checked="checked" v-on:change="toggleYMinor"> Y Minor </label> </div> </div> </div> <div class="form-group"> <wj-flex-chart :itemsSource="data" bindingX="date" chartType="Candlestick" :palette="palette" :initialized="chartInitialized"> <wj-flex-chart-series binding="high,low,open,close" name="Alphabet Inc"></wj-flex-chart-series> <wj-flex-chart-legend position="None"></wj-flex-chart-legend> <wj-flex-chart-axis wjProperty="axisX" format="MMM dd" :majorGrid="true" majorTickMarks="Cross" :axisLine="true" :majorUnit="7" :minorGrid="true" minorTickMarks="None" :minorUnit="1"></wj-flex-chart-axis> <wj-flex-chart-axis :min="790" :max="860" wjProperty="axisY" format="c0" :majorGrid="true" majorTickMarks="Cross" :majorUnit="20" :minorGrid="true" :axisLine="true" minorTickMarks="None" :minorUnit="5"></wj-flex-chart-axis> </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'; import * as wjCore from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.chart'; let App = Vue.extend({ name: 'app', data: function () { return { data: getData(), palette: this.getRandomPalette() } }, methods: { chartInitialized: function(flex) { this.theChart = flex; }, 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]]; }, customGridLine: function(e) { wjCore.toggleClass(this.theChart.hostElement, 'custom-gridlines', e.target.checked); }, customUnits: function(e) { let theChart = this.theChart; if (e.target.checked) { theChart.axisX.majorUnit = 7; theChart.axisX.minorUnit = 1; theChart.axisY.majorUnit = 20; theChart.axisY.minorUnit = 5; } else { theChart.axisX.majorUnit = null; theChart.axisX.minorUnit = null; theChart.axisY.majorUnit = null; theChart.axisY.minorUnit = null; } }, toggleXMajor: function(e) { this.theChart.axisX.majorGrid = e.target.checked }, toggleXMinor: function(e) { this.theChart.axisX.minorGrid = e.target.checked }, toggleYMajor: function(e) { this.theChart.axisY.majorGrid = e.target.checked }, toggleYMinor: function(e) { this.theChart.axisY.minorGrid = e.target.checked } } }) new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> .wj-flexchart { height: 300px; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-tick, .custom-gridlines.wj-flexchart .wj-axis-y .wj-tick { stroke: darkgreen; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline, .custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline { opacity: .25; stroke: darkgreen; stroke-width: 1px; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline-minor, .custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline-minor { opacity: .25; stroke: darkgreen; stroke-dasharray: 0; stroke-width: .25px; } .wj-control { margin-bottom: 6px; } body { margin-bottom: 24pt; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Gridlines and Tickmarks</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> export function getData() { return [ { date: new Date(2017, 2, 17), open: 851.61, high: 853.4, low: 847.11, close: 852.12, vol: 1716471 }, { date: new Date(2017, 2, 16), open: 849.03, high: 850.85, low: 846.13, close: 848.78, vol: 977560 }, { date: new Date(2017, 2, 15), open: 847.59, high: 848.63, low: 840.77, close: 847.2, vol: 1381474 }, { date: new Date(2017, 2, 14), open: 843.64, high: 847.24, low: 840.8, close: 845.62, vol: 780198 }, { date: new Date(2017, 2, 13), open: 844, high: 848.68, low: 843.25, close: 845.54, vol: 1223647 }, { date: new Date(2017, 2, 10), open: 843.28, high: 844.91, low: 839.5, close: 843.25, vol: 1704024 }, { date: new Date(2017, 2, 9), open: 836, high: 842, low: 834.21, close: 838.68, vol: 1261517 }, { date: new Date(2017, 2, 8), open: 833.51, high: 838.15, low: 831.79, close: 835.37, vol: 989773 }, { date: new Date(2017, 2, 7), open: 827.4, high: 833.41, low: 826.52, close: 831.91, vol: 1037630 }, { date: new Date(2017, 2, 6), open: 826.95, high: 828.88, low: 822.4, close: 827.78, vol: 1109037 }, { date: new Date(2017, 2, 3), open: 830.56, high: 831.36, low: 825.75, close: 829.08, vol: 896378 }, { date: new Date(2017, 2, 2), open: 833.85, high: 834.51, low: 829.64, close: 830.63, vol: 942476 }, { date: new Date(2017, 2, 1), open: 828.85, high: 836.26, low: 827.26, close: 835.24, vol: 1496540 }, { date: new Date(2017, 1, 28), open: 825.61, high: 828.54, low: 820.2, close: 823.21, vol: 2260769 }, { date: new Date(2017, 1, 27), open: 824.55, high: 830.5, low: 824, close: 829.28, vol: 1101466 }, { date: new Date(2017, 1, 24), open: 827.73, high: 829, low: 824.2, close: 828.64, vol: 1392202 }, { date: new Date(2017, 1, 23), open: 830.12, high: 832.46, low: 822.88, close: 831.33, vol: 1472771 }, { date: new Date(2017, 1, 22), open: 828.66, high: 833.25, low: 828.64, close: 830.76, vol: 987248 }, { date: new Date(2017, 1, 21), open: 828.66, high: 833.45, low: 828.35, close: 831.66, vol: 1262337 }, { date: new Date(2017, 1, 17), open: 823.02, high: 828.07, low: 821.66, close: 828.07, vol: 1611039 }, { date: new Date(2017, 1, 16), open: 819.93, high: 824.4, low: 818.98, close: 824.16, vol: 1287626 }, { date: new Date(2017, 1, 15), open: 819.36, high: 823, low: 818.47, close: 818.98, vol: 1313617 }, { date: new Date(2017, 1, 14), open: 819, high: 823, low: 816, close: 820.45, vol: 1054732 }, { date: new Date(2017, 1, 13), open: 816, high: 820.96, low: 815.49, close: 819.24, vol: 1213324 }, { date: new Date(2017, 1, 10), open: 811.7, high: 815.25, low: 809.78, close: 813.67, vol: 1134976 }, { date: new Date(2017, 1, 9), open: 809.51, high: 810.66, low: 804.54, close: 809.56, vol: 990391 }, { date: new Date(2017, 1, 8), open: 807, high: 811.84, low: 803.19, close: 808.38, vol: 1155990 }, { date: new Date(2017, 1, 7), open: 803.99, high: 810.5, low: 801.78, close: 806.97, vol: 1241221 }, { date: new Date(2017, 1, 6), open: 799.7, high: 801.67, low: 795.25, close: 801.34, vol: 1184483 }, { date: new Date(2017, 1, 3), open: 802.99, high: 806, low: 800.37, close: 801.49, vol: 1463448 } ]; } 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 wjCore from '@grapecity/wijmo'; import * as wjChart from '@grapecity/wijmo.chart'; // import * as Chart from '@grapecity/wijmo.react.chart'; import { getData } from './data'; // class App extends React.Component { // constructor(props) { super(props); this.state = { data: getData(), palette: this.getRandomPalette(), customGridlines: true, customUnits: true, xMajor: true, xMinor: true, yMajor: true, yMinor: true, xMajorUnit: 7, xMinorUnit: 1, yMajorUnit: 20, yMinorUnit: 5 }; } // render() { return <div className="container"> <div className="form-group"> <h4> Gridlines </h4> <div className="row"> <div className="col-xs-4"> <label> <input id="customGridlines" type="checkbox" checked={this.state.customGridlines} onChange={this.customGridlinesChanged.bind(this)}/> Custom CSS </label> <br /> <label> <input id="customGridlines" type="checkbox" checked={this.state.customUnits} onChange={this.customUnitsChanged.bind(this)}/> Custom Units </label> </div> <div className="col-xs-4"> <label> <input id="x-major" type="checkbox" checked={this.state.xMajor} onChange={this.xMajorChanged.bind(this)}/> X Major </label> <br /> <label> <input id="x-minor" type="checkbox" checked={this.state.xMinor} onChange={this.xMinorChanged.bind(this)}/> X Minor </label> </div> <div className="col-xs-4"> <label> <input id="y-major" type="checkbox" checked={this.state.yMajor} onChange={this.yMajorChanged.bind(this)}/> Y Major </label> <br /> <label> <input id="y-minor" type="checkbox" checked={this.state.yMinor} onChange={this.yMinorChanged.bind(this)}/> Y Minor </label> </div> </div> </div> <div className="form-group"> <Chart.FlexChart chartType="Candlestick" bindingX="date" palette={this.state.palette} itemsSource={this.state.data} initialized={this.chartInitialized.bind(this)}> <Chart.FlexChartSeries binding="high,low,open,close" name="Alphabet Inc"></Chart.FlexChartSeries> <Chart.FlexChartLegend position="None"></Chart.FlexChartLegend> <Chart.FlexChartAxis wjProperty="axisX" format="MMM dd" axisLine={true} majorTickMarks="Cross" minorTickMarks="None" majorGrid={this.state.xMajor} minorGrid={this.state.xMinor} majorUnit={this.state.xMajorUnit} minorUnit={this.state.xMinorUnit}> </Chart.FlexChartAxis> <Chart.FlexChartAxis min={790} max={860} wjProperty="axisY" format="c0" axisLine={true} majorTickMarks="Cross" minorTickMarks="None" majorGrid={this.state.yMajor} minorGrid={this.state.yMinor} majorUnit={this.state.yMajorUnit} minorUnit={this.state.yMinorUnit}> </Chart.FlexChartAxis> </Chart.FlexChart> </div> </div>; } // chartInitialized(flex) { this.theChart = flex; wjCore.addClass(this.theChart.hostElement, 'custom-gridlines'); } // getRandomPalette() { 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]]; } // customGridlinesChanged() { let customGridlines = !this.state.customGridlines; wjCore.toggleClass(this.theChart.hostElement, 'custom-gridlines', customGridlines); this.setState({ customGridlines: customGridlines }); } // customUnitsChanged() { let theChart = this.theChart; if (theChart) { let customUnits = !this.state.customUnits; if (customUnits) { this.setState({ customUnits: customUnits, xMajorUnit: 7, xMinorUnit: 1, yMajorUnit: 20, yMinorUnit: 5 }); } else { this.setState({ customUnits: customUnits, xMajorUnit: null, xMinorUnit: null, yMajorUnit: null, yMinorUnit: null }); } } } // xMajorChanged() { if (this.theChart) { let xMajor = !this.state.xMajor; this.setState({ xMajor: xMajor }); } } // xMinorChanged() { if (this.theChart) { let xMinor = !this.state.xMinor; this.setState({ xMinor: xMinor }); } } // yMajorChanged() { if (this.theChart) { let yMajor = !this.state.yMajor; this.setState({ yMajor: yMajor }); } } // yMinorChanged() { if (this.theChart) { let yMinor = !this.state.yMinor; this.setState({ yMinor: yMinor }); } } } // 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 FlexChart Gridlines and Tickmarks</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> .wj-flexchart { height: 300px; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-tick, .custom-gridlines.wj-flexchart .wj-axis-y .wj-tick { stroke: darkgreen; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline, .custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline { opacity: .25; stroke: darkgreen; stroke-width: 1px; } .custom-gridlines.wj-flexchart .wj-axis-x .wj-gridline-minor, .custom-gridlines.wj-flexchart .wj-axis-y .wj-gridline-minor { opacity: .25; stroke: darkgreen; stroke-dasharray: 0; stroke-width: .25px; } .wj-control { margin-bottom: 6px; } body { margin-bottom: 24pt; } export function getData() { return [ { date: new Date(2017, 2, 17), open: 851.61, high: 853.4, low: 847.11, close: 852.12, vol: 1716471 }, { date: new Date(2017, 2, 16), open: 849.03, high: 850.85, low: 846.13, close: 848.78, vol: 977560 }, { date: new Date(2017, 2, 15), open: 847.59, high: 848.63, low: 840.77, close: 847.2, vol: 1381474 }, { date: new Date(2017, 2, 14), open: 843.64, high: 847.24, low: 840.8, close: 845.62, vol: 780198 }, { date: new Date(2017, 2, 13), open: 844, high: 848.68, low: 843.25, close: 845.54, vol: 1223647 }, { date: new Date(2017, 2, 10), open: 843.28, high: 844.91, low: 839.5, close: 843.25, vol: 1704024 }, { date: new Date(2017, 2, 9), open: 836, high: 842, low: 834.21, close: 838.68, vol: 1261517 }, { date: new Date(2017, 2, 8), open: 833.51, high: 838.15, low: 831.79, close: 835.37, vol: 989773 }, { date: new Date(2017, 2, 7), open: 827.4, high: 833.41, low: 826.52, close: 831.91, vol: 1037630 }, { date: new Date(2017, 2, 6), open: 826.95, high: 828.88, low: 822.4, close: 827.78, vol: 1109037 }, { date: new Date(2017, 2, 3), open: 830.56, high: 831.36, low: 825.75, close: 829.08, vol: 896378 }, { date: new Date(2017, 2, 2), open: 833.85, high: 834.51, low: 829.64, close: 830.63, vol: 942476 }, { date: new Date(2017, 2, 1), open: 828.85, high: 836.26, low: 827.26, close: 835.24, vol: 1496540 }, { date: new Date(2017, 1, 28), open: 825.61, high: 828.54, low: 820.2, close: 823.21, vol: 2260769 }, { date: new Date(2017, 1, 27), open: 824.55, high: 830.5, low: 824, close: 829.28, vol: 1101466 }, { date: new Date(2017, 1, 24), open: 827.73, high: 829, low: 824.2, close: 828.64, vol: 1392202 }, { date: new Date(2017, 1, 23), open: 830.12, high: 832.46, low: 822.88, close: 831.33, vol: 1472771 }, { date: new Date(2017, 1, 22), open: 828.66, high: 833.25, low: 828.64, close: 830.76, vol: 987248 }, { date: new Date(2017, 1, 21), open: 828.66, high: 833.45, low: 828.35, close: 831.66, vol: 1262337 }, { date: new Date(2017, 1, 17), open: 823.02, high: 828.07, low: 821.66, close: 828.07, vol: 1611039 }, { date: new Date(2017, 1, 16), open: 819.93, high: 824.4, low: 818.98, close: 824.16, vol: 1287626 }, { date: new Date(2017, 1, 15), open: 819.36, high: 823, low: 818.47, close: 818.98, vol: 1313617 }, { date: new Date(2017, 1, 14), open: 819, high: 823, low: 816, close: 820.45, vol: 1054732 }, { date: new Date(2017, 1, 13), open: 816, high: 820.96, low: 815.49, close: 819.24, vol: 1213324 }, { date: new Date(2017, 1, 10), open: 811.7, high: 815.25, low: 809.78, close: 813.67, vol: 1134976 }, { date: new Date(2017, 1, 9), open: 809.51, high: 810.66, low: 804.54, close: 809.56, vol: 990391 }, { date: new Date(2017, 1, 8), open: 807, high: 811.84, low: 803.19, close: 808.38, vol: 1155990 }, { date: new Date(2017, 1, 7), open: 803.99, high: 810.5, low: 801.78, close: 806.97, vol: 1241221 }, { date: new Date(2017, 1, 6), open: 799.7, high: 801.67, low: 795.25, close: 801.34, vol: 1184483 }, { date: new Date(2017, 1, 3), open: 802.99, high: 806, low: 800.37, close: 801.49, vol: 1463448 } ]; }