Scatter Quadrant

By default the FlexChart places the X axis at the bottom of the plot area and the Y axis on the left. This keeps the axes outside the plot area and away from the data.

You can change this default behavior using two properties:

  • position: Specifies the position of the axis as None, Left, Top, Right, Bottom, or Auto.
  • origin: Specifies the value where the axis crosses its perpendicular axis. If speficied, origin takes precendence over position.
import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjChart from '@grapecity/wijmo.chart'; import * as wjAnnotation from '@grapecity/wijmo.chart.annotation'; // import { getData } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let theChart = new wjChart.FlexChart('#theChart', { chartType: 'Scatter', axisY: { axisLine: true, majorGrid: false, origin: 400000, majorUnit: 1.5, max: 9, min: 6, labels: false }, axisX: { origin: 7.5, min: 0, max: 800000, majorUnit: 200000, labels: false }, dataLabel: { content: (ht) => ht.item.movie, connectingLine: true, offset: 10 }, legend: { position: 'None' }, tooltip: { content: (ht) => { let item = ht.item; return `<b>Movie:</b> ${item.movie} </br><b>Grossing:</b> ${item.gross}</br><b>rating:</b> ${item.rating}`; } }, series: [{ name: 'data', itemsSource: getData(), bindingX: 'gross', binding: 'rating' }] }); // let annoLayer = new wjAnnotation.AnnotationLayer(theChart, [ { type: 'Text', attachment: 'DataCoordinate', point: { x: 200000, y: 9 }, position: wjAnnotation.AnnotationPosition.Bottom, text: 'Lower Grossing, Higher Rating' }, { type: 'Text', attachment: 'DataCoordinate', point: { x: 600000, y: 9 }, position: wjAnnotation.AnnotationPosition.Bottom, text: 'Higher Grossing, Higher Rating' }, { type: 'Text', attachment: 'DataCoordinate', point: { x: 200000, y: 6 }, text: 'Lower Grossing, Lower Rating' }, { type: 'Text', attachment: 'DataCoordinate', point: { x: 600000, y: 6 }, text: 'Higher Grossing, Lower Rating' } ]); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexChart Scatter Quadrant</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> // export function getData() { return [ { movie: 'Black Panther', rating: 7.4, gross: 700059 }, { movie: 'Avengers: Infinity War', rating: 8.5, gross: 678815 }, { movie: 'Incredibles 2', rating: 7.8, gross: 608581 }, { movie: 'Jurassic World: Fallen Kingdom', rating: 6.2, gross: 416769 }, { movie: 'Deadpool 2', rating: 7.8, gross: 318491 }, { movie: "Dr. Seuss' The Grinch", rating: 6.4, gross: 261335 }, { movie: 'Mission: Impossible - Fallout', rating: 7.9, gross: 220159 }, { movie: 'Ant-Man and the Wasp', rating: 7.2, gross: 216648 }, { movie: 'Venom', rating: 6.8, gross: 213205 }, { movie: 'A Star is Born', rating: 8.1, gross: 200539 }, { movie: 'Bohemian Rhapsody', rating: 8.3, gross: 186856 }, { movie: 'Crazy Rich Asians', rating: 7.1, gross: 174016 }, { movie: 'Ralph Breaks the Internet', rating: 7.4, gross: 169181 }, { movie: 'Halloween', rating: 6.9, gross: 159326 }, { movie: 'The Meg', rating: 5.8, gross: 145443 }, { movie: "Ocean's 8", rating: 6.2, gross: 140218 }, { movie: 'Ready Player One', rating: 7.5, gross: 137690 }, { movie: 'Aquaman', rating: 7.6, gross: 137235 } ]; } .wj-flexchart { height: 600px; width: 600px; margin: 10px 0; } body { margin-bottom: 24pt; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjcChart 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 { WjChartAnnotationModule } from '@grapecity/wijmo.angular2.chart.annotation'; import { DataService, TDataItem } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: TDataItem[]; // constructor(@Inject(DataService) private dataService: DataService) { this.data = dataService.getData(); } // customTooltip(ht: wjcChart.HitTestInfo) { let item: TDataItem = ht.item; return `<b>Movie:</b> ${item.movie} </br><b>Grossing:</b> ${item.gross}</br><b>rating:</b> ${item.rating}`; } // customDataLabel(ht: wjcChart.HitTestInfo) { return (<TDataItem>ht.item).movie; } } // @NgModule({ imports: [WjChartModule, WjChartAnnotationModule, 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 Scatter Quadrant</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 [chartType]="'Scatter'" [tooltipContent]="customTooltip"> <wj-flex-chart-axis wjProperty="axisY" [labels]="false" [min]="6" [max]="9" [axisLine]="true" [majorGrid]="false" [origin]="400000" [majorUnit]="1.5"> </wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisX" [labels]="false" [min]="0" [max]="800000" [axisLine]="true" [majorUnit]="200000" [origin]="7.5"> </wj-flex-chart-axis> <wj-flex-chart-legend [position]="'None'"> </wj-flex-chart-legend> <wj-flex-chart-data-label [connectingLine]="true" [offset]="10" [content]="customDataLabel"> </wj-flex-chart-data-label> <wj-flex-chart-series [name]="'data'" [itemsSource]="data" [bindingX]="'gross'" [binding]="'rating'"> </wj-flex-chart-series> <wj-flex-chart-annotation-layer control="al"> <wj-flex-chart-annotation-text [attachment]="'DataCoordinate'" [text]="'Lower Grossing, Higher Rating'" [position]="2" [point]="{ x: 200000, y: 9 }"></wj-flex-chart-annotation-text> <wj-flex-chart-annotation-text [attachment]="'DataCoordinate'" [text]="'Higher Grossing, Higher Rating'" [position]="2" [point]="{ x: 600000, y: 9 }"></wj-flex-chart-annotation-text> <wj-flex-chart-annotation-text [attachment]="'DataCoordinate'" [text]="'Lower Grossing, Lower Rating'" [point]="{ x: 200000, y: 6 }"></wj-flex-chart-annotation-text> <wj-flex-chart-annotation-text [attachment]="'DataCoordinate'" [text]="'Higher Grossing, Lower Rating'" [point]="{ x: 600000, y: 6 }"></wj-flex-chart-annotation-text> </wj-flex-chart-annotation-layer> </wj-flex-chart> </div> import { Injectable } from '@angular/core'; // export type TDataItem = { movie: string; rating: number; gross: number; } // @Injectable() export class DataService { getData() { return <TDataItem[]>[ { movie: 'Black Panther', rating: 7.4, gross: 700059 }, { movie: 'Avengers: Infinity War', rating: 8.5, gross: 678815 }, { movie: 'Incredibles 2', rating: 7.8, gross: 608581 }, { movie: 'Jurassic World: Fallen Kingdom', rating: 6.2, gross: 416769 }, { movie: 'Deadpool 2', rating: 7.8, gross: 318491 }, { movie: "Dr. Seuss' The Grinch", rating: 6.4, gross: 261335 }, { movie: 'Mission: Impossible - Fallout', rating: 7.9, gross: 220159 }, { movie: 'Ant-Man and the Wasp', rating: 7.2, gross: 216648 }, { movie: 'Venom', rating: 6.8, gross: 213205 }, { movie: 'A Star is Born', rating: 8.1, gross: 200539 }, { movie: 'Bohemian Rhapsody', rating: 8.3, gross: 186856 }, { movie: 'Crazy Rich Asians', rating: 7.1, gross: 174016 }, { movie: 'Ralph Breaks the Internet', rating: 7.4, gross: 169181 }, { movie: 'Halloween', rating: 6.9, gross: 159326 }, { movie: 'The Meg', rating: 5.8, gross: 145443 }, { movie: "Ocean's 8", rating: 6.2, gross: 140218 }, { movie: 'Ready Player One', rating: 7.5, gross: 137690 }, { movie: 'Aquaman', rating: 7.6, gross: 137235 } ]; } } .wj-flexchart { height: 600px; width: 600px; margin: 10px 0; } body { margin-bottom: 24pt; } <template> <div class="container-fluid"> <wj-flex-chart chartType="Scatter" :tooltipContent="customTooltip"> <wj-flex-chart-axis wjProperty="axisY" :labels="false" :min=6 :max=9 :axisLine=true :majorGrid=false :origin=400000 :majorUnit=1.5> </wj-flex-chart-axis> <wj-flex-chart-axis wjProperty="axisX" :labels=false :min=0 :max=800000 :axisLine=true :majorUnit=200000 :origin=7.5> </wj-flex-chart-axis> <wj-flex-chart-legend position="None"> </wj-flex-chart-legend> <wj-flex-chart-data-label :connectingLine=true :offset=10 :content="customDataLabel"> </wj-flex-chart-data-label> <wj-flex-chart-series name="data" :itemsSource="data" bindingX="gross" binding="rating"> </wj-flex-chart-series> <wj-flex-chart-annotation-layer> <wj-flex-chart-annotation-text attachment="DataCoordinate" text="Lower Grossing, Higher Rating" :position=2 :point=" {x: 200000, y: 9 }"></wj-flex-chart-annotation-text> <wj-flex-chart-annotation-text attachment="DataCoordinate" text="Higher Grossing, Higher Rating" :position=2 :point="{ x: 600000, y: 9 }"></wj-flex-chart-annotation-text> <wj-flex-chart-annotation-text attachment="DataCoordinate" text="Lower Grossing, Lower Rating" :point="{ x: 200000, y: 6 }"></wj-flex-chart-annotation-text> <wj-flex-chart-annotation-text attachment="DataCoordinate" text="Higher Grossing, Lower Rating" :point="{ x: 600000, y: 6 }"></wj-flex-chart-annotation-text> </wj-flex-chart-annotation-layer> </wj-flex-chart> </div> </template> <script> import '@grapecity/wijmo.styles/wijmo.css'; import 'bootstrap.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.chart'; import '@grapecity/wijmo.vue2.chart.annotation'; import { getData } from './data'; // new Vue({ el: '#app', data: { data: getData() }, methods: { customTooltip(ht) { let item = ht.item; return `<b>Movie:</b> ${item.movie} </br><b>Grossing:</b> ${item.gross}</br><b>rating:</b> ${item.rating}`; }, customDataLabel(ht) { return ht.item.movie; } } }); </script> <style> .container-fluid .wj-flexchart { height: 600px; width: 600px; margin: 10px 0; } 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 Scatter Quadrant</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> // DOMESTIC GROSSES export function getData() { return [ { movie: 'Black Panther', rating: 7.4, gross: 700059 }, { movie: 'Avengers: Infinity War', rating: 8.5, gross: 678815 }, { movie: 'Incredibles 2', rating: 7.8, gross: 608581 }, { movie: 'Jurassic World: Fallen Kingdom', rating: 6.2, gross: 416769 }, { movie: 'Deadpool 2', rating: 7.8, gross: 318491 }, { movie: "Dr. Seuss' The Grinch", rating: 6.4, gross: 261335 }, { movie: 'Mission: Impossible - Fallout', rating: 7.9, gross: 220159 }, { movie: 'Ant-Man and the Wasp', rating: 7.2, gross: 216648 }, { movie: 'Venom', rating: 6.8, gross: 213205 }, { movie: 'A Star is Born', rating: 8.1, gross: 200539 }, { movie: 'Bohemian Rhapsody', rating: 8.3, gross: 186856 }, { movie: 'Crazy Rich Asians', rating: 7.1, gross: 174016 }, { movie: 'Ralph Breaks the Internet', rating: 7.4, gross: 169181 }, { movie: 'Halloween', rating: 6.9, gross: 159326 }, { movie: 'The Meg', rating: 5.8, gross: 145443 }, { movie: "Ocean's 8", rating: 6.2, gross: 140218 }, { movie: 'Ready Player One', rating: 7.5, gross: 137690 }, { movie: 'Aquaman', rating: 7.6, gross: 137235 } ]; } 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 wjChartAnnotation from '@grapecity/wijmo.react.chart.annotation'; import { getData } from './data'; // class App extends React.Component { constructor(props) { super(props); this.initChart = (sender) => { sender.dataLabel.content = this.customDataLabel; sender.tooltip.content = this.customTooltip; }; this.customTooltip = (ht) => { let item = ht.item; return `<b>Movie:</b> ${item.movie} </br><b>Grossing:</b> ${item.gross}</br><b>rating:</b> ${item.rating}`; }; this.customDataLabel = (ht) => { return ht.item.movie; }; this.state = { data: getData() }; } render() { return <div className="container-fluid"> <wjChart.FlexChart chartType="Scatter" initialized={this.initChart}> <wjChart.FlexChartAxis wjProperty="axisY" labels={false} min={6} max={9} axisLine={true} majorGrid={false} origin={400000} majorUnit={1.5}> </wjChart.FlexChartAxis> <wjChart.FlexChartAxis wjProperty="axisX" labels={false} min={0} max={800000} axisLine={true} majorUnit={200000} origin={7.5}> </wjChart.FlexChartAxis> <wjChart.FlexChartLegend position="None"></wjChart.FlexChartLegend> <wjChart.FlexChartDataLabel connectingLine={true} offset={10}></wjChart.FlexChartDataLabel> <wjChart.FlexChartSeries name="data" itemsSource={this.state.data} bindingX="gross" binding="rating"> </wjChart.FlexChartSeries> <wjChartAnnotation.FlexChartAnnotationLayer> <wjChartAnnotation.FlexChartAnnotation type="Text" attachment="DataCoordinate" text="Lower Grossing, Higher Rating" position={2} point={{ x: 200000, y: 9 }}> </wjChartAnnotation.FlexChartAnnotation> <wjChartAnnotation.FlexChartAnnotation type="Text" attachment="DataCoordinate" text="Higher Grossing, Higher Rating" position={2} point={{ x: 600000, y: 9 }}> </wjChartAnnotation.FlexChartAnnotation> <wjChartAnnotation.FlexChartAnnotation type="Text" attachment="DataCoordinate" text="Lower Grossing, Lower Rating" point={{ x: 200000, y: 6 }}> </wjChartAnnotation.FlexChartAnnotation> <wjChartAnnotation.FlexChartAnnotation type="Text" attachment="DataCoordinate" text="Higher Grossing, Lower Rating" point={{ x: 600000, y: 6 }}> </wjChartAnnotation.FlexChartAnnotation> </wjChartAnnotation.FlexChartAnnotationLayer> </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>GrapeCity Wijmo FlexChart Scatter Quadrant</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: 600px; width: 600px; margin: 10px 0; } body { margin-bottom: 24pt; } // export function getData() { return [ { movie: 'Black Panther', rating: 7.4, gross: 700059 }, { movie: 'Avengers: Infinity War', rating: 8.5, gross: 678815 }, { movie: 'Incredibles 2', rating: 7.8, gross: 608581 }, { movie: 'Jurassic World: Fallen Kingdom', rating: 6.2, gross: 416769 }, { movie: 'Deadpool 2', rating: 7.8, gross: 318491 }, { movie: "Dr. Seuss' The Grinch", rating: 6.4, gross: 261335 }, { movie: 'Mission: Impossible - Fallout', rating: 7.9, gross: 220159 }, { movie: 'Ant-Man and the Wasp', rating: 7.2, gross: 216648 }, { movie: 'Venom', rating: 6.8, gross: 213205 }, { movie: 'A Star is Born', rating: 8.1, gross: 200539 }, { movie: 'Bohemian Rhapsody', rating: 8.3, gross: 186856 }, { movie: 'Crazy Rich Asians', rating: 7.1, gross: 174016 }, { movie: 'Ralph Breaks the Internet', rating: 7.4, gross: 169181 }, { movie: 'Halloween', rating: 6.9, gross: 159326 }, { movie: 'The Meg', rating: 5.8, gross: 145443 }, { movie: "Ocean's 8", rating: 6.2, gross: 140218 }, { movie: 'Ready Player One', rating: 7.5, gross: 137690 }, { movie: 'Aquaman', rating: 7.6, gross: 137235 } ]; }