Properties

NameTypeDefault
title string Chart title

Sets or gets the jqxChart title.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'My Title'} description={'Time Spent in Vigorous Exercise'} enableAnimations={true}
        source={this.state.source} xAxis={this.state.xAxis} seriesGroups={this.state.seriesGroups}
        colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
description string Description

Sets or gets the jqxChart description.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'My Description'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
source any []

Sets the chart's data source.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showBorderLine boolean true

Determines whether to display the chart's border line.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        showBorderLine={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
borderLineColor string #888888

Sets or gets the chart's border line color.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        borderLineColor={'#111888'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
borderLineWidth number 1

Sets or gets the chart's border line width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        borderLineWidth={3}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
backgroundColor string #FFFFFF 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        backgroundColor={'#FFFFFF'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
backgroundImage string '' 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        backgroundImage={'http://www.jqwidgets.com/jquery-widgets-demo/images/chart_background.jpg'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showLegend boolean true
Determines whether to show or hide the chart series legend. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        showLegend={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
legendLayout ChartLegendLayout {}
ChartLegendFlow: "vertical" | "horizontal"

Interface ChartLegendLayout {
  left?: number;
  top?: number;
  width?: number | string;
  height?: number | string;
  flow?: ChartLegendFlow;
}

Sets the legend's layout. The expected object is with the following fields:

  • "left" - legend's X position.
  • "top" - legend's Y position.
  • "width" - legend's width.
  • "height" - legend's height.
  • "flow" - 'horizontal' or 'vertical'.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        legendLayout: { left: 500, top: 140, width: 300, height: 200, flow: 'vertical' },
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        legendLayout={this.state.legendLayout}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
padding ChartPadding {left: 5, top: 5, right: 5, bottom: 5}
Interface ChartPadding {
  left?: number;
  right?: number;
  top?: number;
  bottom?: number;
}

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        padding={{ left: 10, top: 10, right: 10, bottom: 10 }}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
titlePadding ChartPadding {left: 2, top: 2, right: 2, bottom: 2}
Interface ChartPadding {
  left?: number;
  right?: number;
  top?: number;
  bottom?: number;
}

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        titlePadding={{ left: 10, top: 10, right: 10, bottom: 10 }}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
colorScheme string scheme01 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme03'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
greyScale boolean false 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        greyScale={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showToolTips boolean true 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        showToolTips={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
toolTipShowDelay number 500 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        toolTipShowDelay={300}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
toolTipHideDelay number 4000 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        toolTipHideDelay={300}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
toolTipMoveDuration number 300 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        toolTipMoveDuration={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
drawBefore (renderer?: ChartDrawBefore['renderer'], rect?: ChartDrawBefore['rect']) => void null
Interface ChartDrawBefore {
  renderer?: object;
  rect?: object;
}

function for custom drawing before the title and other chart elements 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        drawBefore: (renderer?: object, rect?: object): any => {
          renderer.rect(rect.x, rect.y, rect.width, rect.height, { fill: 'lightblue' });
        },
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        drawBefore={this.state.drawBefore}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
draw (renderer?: ChartDraw['renderer'], rect?: ChartDraw['rect']) => void null
Interface ChartDraw {
  renderer?: object;
  rect?: object;
}

Determines the drawing function of jqxChart. When the property is set, you can override the jqxChart's drawing. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        draw: (renderer?: object, rect?: object): any => {
          // do something
        },
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        draw={this.state.draw}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
rtl boolean false
Sets or gets a value indicating whether the Chart's layout is mirrored. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
enableCrosshairs boolean false
Enables or disables the crosshairs lines. The lines are displayed in line and area series when you move over a data point.
crosshairsColor string #888888
Gets or sets the color of the crosshairs lines.
crosshairsDashStyle string 2,2
Gets or sets the dash style of the crosshairs lines. The style is a series of numbers indicating line length followed by space length.
crosshairsLineWidth number 1
Gets or sets the width of the crosshairs lines.
columnSeriesOverlap boolean false

enabled boolean true
Gets or sets whether the chart widget in enabled or disabled state. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        enabled={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
enableAnimations boolean true
Determines if the animations are enabled. When you set this property it will turn on or off the animations for all series in all seriesGroups in the chart. You can override this property for individual seriesGroups and series. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={false} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
animationDuration number 500
Determines the animations duration in milliseconds. The value must be between 0 and 5000. If it is outside of this range jqxChart will reset it to the default value of 1000. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        animationDuration={1500}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
enableAxisTextAnimation boolean false
Determines if the animation of the axes text is enabled. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        animationDuration={1000} enableAxisTextAnimation={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
renderEngine ChartRenderEngine auto
ChartRenderEngine: "auto" | "SVG" | "HTML5" | "VML"

Determines the rendering engine used to display the chart. Possible values are 'SVG', 'VML' and 'HTML5'. When the property is not set jqxChart will automatically select an optimal rendering engine depending on the browser capabilities. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        renderEngine={'HTML5'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
xAxis ChartXAxis null
Interface ChartPadding {
  left?: number;
  right?: number;
  top?: number;
  bottom?: number;
}

Interface ChartTickMarks {
  visible?: any;
  color?: string;
  step?: number;
  dashStyle?: string;
  lineWidth?: number;
  size?: number | string;
  interval?: any;
  custom?: Array<ChartCustomOffset>;
}

Interface ChartGridLines {
  visible?: any;
  color?: string;
  step?: number;
  dashStyle?: string;
  lineWidth?: number;
  interval?: any;
  custom?: Array<ChartCustomOffset>;
}

Interface ChartAxisLine {
  visible?: any;
  color?: string;
  dashStyle?: string;
  lineWidth?: number;
}

ChartAxisType: "default" | "date" | "basic"

ChartDateAxisBaseUnit: "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond"

ChartAxisPosition: "left" | "top" | "right" | "bottom"

Interface ChartAxisLabels {
  visible?: any;
  class?: string;
  step?: number;
  angle?: number;
  rotationPoint?: ChartTextRotationPoint;
  horizontalAlignment?: ChartHorizontalTextAlignment;
  verticalAlignment?: ChartVerticalTextAlignment;
  offset?: ChartOffset;
  custom?: Array<ChartCustomOffset>;
  formatSettings?: ChartFormatSettings;
  formatFunction?: (value: any, itemIndex?: number, serieIndex?: number, groupIndex?: number, xAxisValue?: any, xAxis?: ChartXAxis) => string;
  autoRotate?: boolean;
}

Interface ChartFormatSettings {
  prefix?: string;
  sufix?: string;
  decimalSeparator?: string;
  thousandsSeparator?: string;
  decimalPlaces?: number;
  negativeWithBrackets?: boolean;
  dateFormat?: string;
}

Interface ChartAxisTitle {
  visible?: boolean;
  text?: string;
  class?: string;
  horizontalAlignment?: ChartHorizontalTextAlignment;
  verticalAlignment?: ChartVerticalTextAlignment;
  angle?: number;
  rotationPoint?: ChartTextRotationPoint;
  offset?: ChartOffset;
}

Interface ChartColorBand {
  minValue?: number;
  maxValue?: number;
  fillColor?: string;
  opacity?: number;
  lineColor?: string;
  lineWidth?: number;
  dashStyle?: string;
}

Interface ChartXAxis {
  visible?: boolean;
  unitInterval?: number;
  dataField?: string;
  displayText?: string;
  type?: ChartAxisType;
  baseUnit?: ChartDateAxisBaseUnit;
  valuesOnTicks?: boolean;
  dateFormat?: string;
  axisSize?: number | string;
  customDraw?: boolean;
  flip?: boolean;
  position?: ChartAxisPosition;
  padding?: ChartPadding;
  title?: ChartAxisTitle;
  tickMarks?: ChartTickMarks;
  gridLines?: ChartGridLines;
  line?: ChartAxisLine;
  labels?: ChartAxisLabels;
  logarithmicScale?: boolean;
  logarithmicScaleBase?: number;
  minValue?: any;
  maxValue?: any;
  bands?: Array<ChartColorBand>;
  alternatingBackgroundColor?: string;
  alternatingBackgroundColor2?: string;
  alternatingBackgroundOpacity?: number;
  formatSettings?: any;
  formatFunction?: any;
  toolTipFormatSettings?: ChartFormatSettings;
  toolTipFormatFunction?: any;
  rangeSelector?: any;
  textRotationAngle?: number;
}

Sets the Chart's xAxis.

Example: 

xAxis:
{
	dataField: 'Date',
	formatFunction: function (value) {
		var months =
		['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
		return months[value.getMonth()];
	},
	type: 'date',
	baseUnit: 'month',
	flip: false,
	tickMarks: {
		visible: true,
		step: 1,
		color: '#888888'
	},
	unitInterval: 1,
	gridLines: { 
		visible: true,
		step: 3,
		color: '#888888'
	}
}
  • visible - shows or hides the xAxis axis.
  • unitInterval - sets the interval between the units.
  • dataField - points to a data field in the data source.
  • type - the type of the axis. Values can be:
    • 'default' - auto detects and switches to 'basic', 'linear' or 'date'
    • 'date'- when displaying dates
    • 'basic' - displays all data points sequencially
    • 'linear' - linear arrangement by the value of the xAxis data field
  • baseUnit - the base unit when used with 'date' axis. Values can be 'year', 'month', 'day', 'hour', 'minute', 'second' or 'millisecond'.
  • valuesOnTicks - specifies whether the axis values will be aligned with the tick marks.
  • dateFormat - optional date format for parsing the data from the data source. Applicable when type is set to 'date'.
  • axisSize - sets the size of the xAxis.
  • customDraw - boolean determining whether to draw the axis or the user will use APIs to draw it. The default is false.
  • flip - specifies whether the axis is displayed in reverse order.
  • position - sets the axis position. Possible values: "top" and "bottom".
  • padding - object describing the padding of the axis
    • top - top padding.
    • bottom - bottom padding.
  • title - object describing the title of the axis
    • visible - boolean determining the visibility of the title.
    • text - text of the title.
    • class - CSS class of the title text.
    • horizontalAlignment - horizontal alignment.
    • verticalAlignment - horizontal alignment.
  • tickMarks - object describing the tick marks properties of the axis
    • visible - true/false/'custom' determining the visibility. When 'custom' is set, displays only custom values/offsets.
    • step - interval steps between tick marks placements.
    • dashStyle - tick marks dash style, e.g. '2,2',
    • lineWidth - line width in pixels of the tick marks.
    • size - size in pixels of the tick marks. The default is 4.
    • color - color of the tick marks, e.g. '#757575'.
    • custom - an array of custom values/offsets where a label/tickmark/gridline will be displayed.
  • gridLines - object describing the grid lines properties of the axis
    • visible - true/false/'custom' determining the visibility. When 'custom' is set, displays only custom values/offsets.
    • step - interval steps between grid lines placements.
    • dashStyle - grid lines dash style, e.g. '2,2',
    • lineWidth - line width in pixels of the grid lines.
    • color - color of the tick marks, e.g. '#757575'.
    • custom - an array of custom values/offsets where a label/tickmark/gridline will be displayed.
  • line - object describing the line properties of the axis
    • visible - boolean determining the visibility of the axis line.
    • dashStyle - line dash style, e.g. '2,2'. The default is inherited from the grid lines.
    • lineWidth - line width. The default is inherited from the grid lines.
    • color - color of axis line, e.g. '#757575'.
  • labels - object describing the labels properties of the axis
    • visible - true/false/'custom' determining the visibility of the axis labels. When 'custom' is set, displays only custom values/offsets.
    • step - interval steps between label placements.
    • class - CSS class of the labels.
    • angle - text rotation angle.
    • textRotationPoint - position to rotate the text around, e.g. 'lefttop', 'centertop' or 'rightbottom'
    • autoRotate - boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.
    • horizontalAligment - horizontal labels alignment
    • verticalAligment - vertical labels alignment.
    • offset - labels offset, e.g {x: -5, y: 0}.
    • formatSettings - object describing the format settings of the labels.
    • formatFunction - callback function used to format the labels.
    • custom - an array of custom values/offsets where a label/tickmark/gridline will be displayed.
  • logarithmicScale - determines whether to use logarithmic scale. The default value is 'false'.
  • logarithmicScaleBase - base for logarithmic scale. The default value is 10.
  • showGridLines - deprecated. (use the visible property of gridLines)
  • gridLinesInterval - deprecated. (use the step property of gridLines)
  • gridLinesColor - deprecated. (use the color property of gridLines)
  • gridLinesDashStyle - deprecated. (use the dashStyle property of gridLines)
  • showTickMarks - deprecated. (use the visible property of tickMarks)
  • tickMarksInterval - deprecated. (use the step property of tickMarks)
  • tickMarksColor - deprecated. (use the color property of tickMarks)
  • tickMarksDashStyle - deprecated. (use the dashStyle property of tickMarks)
  • alternatingBackgroundColor - alternating background color between grid lines
  • alternatingBackgroundColor2 - second alternating background color
  • alternatingBackgroundOpacity - opacity of the alternating background
  • formatSettings - settings used to format the displayed values.
  • formatFunction - custom function to format the displayed values.
  • toolTipFormatSettings - settings used to format xAxis values in tooltips.
  • toolTipFormatFunction - custom function to format xAxis values in tooltips.
  • rangeSelector - definition of a range selector on the xAxis 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
valueAxis ChartValueAxis null
Interface ChartPadding {
  left?: number;
  right?: number;
  top?: number;
  bottom?: number;
}

Interface ChartTickMarks {
  visible?: any;
  color?: string;
  step?: number;
  dashStyle?: string;
  lineWidth?: number;
  size?: number | string;
  interval?: any;
  custom?: Array<ChartCustomOffset>;
}

Interface ChartGridLines {
  visible?: any;
  color?: string;
  step?: number;
  dashStyle?: string;
  lineWidth?: number;
  interval?: any;
  custom?: Array<ChartCustomOffset>;
}

ChartAxisPosition: "left" | "top" | "right" | "bottom"

Interface ChartAxisLabels {
  visible?: any;
  class?: string;
  step?: number;
  angle?: number;
  rotationPoint?: ChartTextRotationPoint;
  horizontalAlignment?: ChartHorizontalTextAlignment;
  verticalAlignment?: ChartVerticalTextAlignment;
  offset?: ChartOffset;
  custom?: Array<ChartCustomOffset>;
  formatSettings?: ChartFormatSettings;
  formatFunction?: (value: any, itemIndex?: number, serieIndex?: number, groupIndex?: number, xAxisValue?: any, xAxis?: ChartXAxis) => string;
  autoRotate?: boolean;
}

Interface ChartFormatSettings {
  prefix?: string;
  sufix?: string;
  decimalSeparator?: string;
  thousandsSeparator?: string;
  decimalPlaces?: number;
  negativeWithBrackets?: boolean;
  dateFormat?: string;
}

Interface ChartAxisTitle {
  visible?: boolean;
  text?: string;
  class?: string;
  horizontalAlignment?: ChartHorizontalTextAlignment;
  verticalAlignment?: ChartVerticalTextAlignment;
  angle?: number;
  rotationPoint?: ChartTextRotationPoint;
  offset?: ChartOffset;
}

Interface ChartColorBand {
  minValue?: number;
  maxValue?: number;
  fillColor?: string;
  opacity?: number;
  lineColor?: string;
  lineWidth?: number;
  dashStyle?: string;
}

Interface ChartValueAxis {
  visible?: boolean;
  flip?: boolean;
  position?: ChartAxisPosition;
  axisSize?: number | string;
  minValue?: number;
  maxValue?: number;
  baselineValue?: number;
  logarithmicScale?: boolean;
  logarithmicScaleBase?: number;
  valuesOnTicks?: boolean;
  unitInterval?: number;
  title?: ChartAxisTitle;
  labels?: ChartAxisLabels;
  gridLines?: ChartGridLines;
  tickMarks?: ChartTickMarks;
  padding?: ChartPadding;
  bands?: Array<ChartColorBand>;
  alternatingBackgroundColor?: string;
  alternatingBackgroundColor2?: string;
  alternatingBackgroundOpacity?: number;
  toolTipFormatSettings?: ChartFormatSettings;
  formatFunction?: any;
}

Example: 
valueAxis: 
{  
	title: { text: 'Values' },     
	unitInterval: 1,     
	minValue: 0,     
	maxValue: 100,     
	gridLines: { visible: true, step: 3, color: '#888888' } 
}
valueAxis properties:
  • visible - shows or hides the valueAxis.
  • unitInterval - sets the interval between the units.
  • minValue - sets the minimum value of the valueAxis.
  • maxValue - sets the maximum value of the valueAxis.
  • baselineValue - sets the baseline value for the axis.
  • logarithmicScale - determines whether to use logarithmic scale. The default value is 'false'.
  • logarithmicScaleBase - base for logarithmic scale. The default value is 10.
  • formatSettings - settings used to format the displayed values along the axis.
  • formatFunction - custom function to format the displayed values along the axis.
  • flip - specifies whether the values are displayed in reverse order.
  • position - sets the axis position. Possible values: \\"left\\" and \\"right\\".
  • padding - object describing the padding of the axis
    • left - left padding.
    • right - right padding.
  • axisSize - sets the size of the axis.
  • customDraw - boolean determining whether to draw the axis or the user will use APIs to draw it. The default is false.
  • title - object describing the title of the valueAxis
    • visible - boolean determining the visibility of the title.
    • text - text of the title.
    • class - CSS class of the title text.
    • horizontalAlignment - horizontal alignment.
    • verticalAlignment - horizontal alignment.
  • tickMarks - object describing the tick marks properties of the valueAxis
    • visible - true/false/'custom' determining the visibility. When 'custom' is set, displays only custom values/offsets.
    • step - interval steps between tick mark placements.
    • dashStyle - tick marks dash style, e.g. '2,2',
    • lineWidth - line width in pixels of the tick marks.
    • size - size in pixels of the tick marks. The default is 4.
    • color - color of the tick marks, e.g. '#757575'.
    • custom - an array of custom values/offsets where a label/tickmark/gridline will be displayed.
  • gridLines - object describing the grid lines properties of the valueAxis
    • visible - true/false/'custom' determining the visibility. When 'custom' is set, displays only custom values/offsets.
    • step - interval steps between grid line placements.
    • dashStyle - grid lines dash style, e.g. '2,2',
    • lineWidth - line width in pixels of the grid lines.
    • color - color of the tick marks, e.g. '#757575'.
    • custom - an array of custom values/offsets where a label/tickmark/gridline will be displayed.
  • line - object describing the line properties of the axis
    • visible - boolean determining the visibility of the axis line.
    • dashStyle - line dash style, e.g. '2,2'. The default is inherited from the grid lines.
    • lineWidth - line width. The default is inherited from the grid lines.
    • color - color of axis line, e.g. '#757575'.
  • labels - object describing the labels properties of the axis
    • visible - true/false/'custom' determining the visibility. When 'custom' is set, displays only custom values/offsets.
    • step - interval steps between label placements.
    • class - CSS class of the labels.
    • angle - text rotation angle.
    • textRotationPoint - position to rotate the text around, e.g. 'lefttop', 'centertop' or 'rightbottom'
    • autoRotate - boolean determining if auto rotation is enabled. Applicable to polar and spider charts only.
    • horizontalAligment - horizontal labels alignment.
    • verticalAligment - vertical labels alignment.
    • offset - labels offset, e.g {x: -5, y: 0}.
    • formatSettings - object describing the format settings of the labels.
    • formatFunction - callback function used to format the labels.
    • custom - an array of custom values/offsets where a label/tickmark/gridline will be displayed.
  • showGridLines - deprecated. (use the visible property of gridLines)
  • gridLinesInterval - deprecated. (use the step property of gridLines)
  • gridLinesColor - deprecated. (use the color property of gridLines)
  • gridLinesDashStyle - deprecated. (use the dashStyle property of gridLines)
  • showTickMarks - deprecated. (use the visible property of tickMarks)
  • tickMarksInterval - deprecated. (use the step property of tickMarks)
  • tickMarksColor - deprecated. (use the color property of tickMarks)
  • tickMarksDashStyle - deprecated. (use the dashStyle property of tickMarks)
  • alternatingBackgroundColor - alternating background color between grid lines
  • alternatingBackgroundColor2 - second alternating background color
  • alternatingBackgroundOpacity - opacity of the alternating background
  • bands - optional color bands dislayed in the chart's plot area
    • minValue - start value of the color band.
    • maxValue - end value of the color band.
    • color - color used to fill the area between the minValue and the maxValue.
    • opacity - fraction indicating the fill opacity.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        valueAxis: {
          title: { text: 'Values' },
          unitInterval: 1,
          minValue: 0,
          maxValue: 100,
          gridLines: { visible: true, step: 3, color: '#888888' }
        },
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
        valueAxis={this.state.valueAxis}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
categoryAxis any null 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
seriesGroups Array<ChartSeriesGroup> null
ChartSerieTypes: "line" | "stackedline" | "stackedline100" | "spline" | "stackedspline" | "stackedspline100" | "stepline" | "stackedstepline" | "stackedstepline100" | "area" | "stackedarea" | "stackedarea100" | "splinearea" | "stackedsplinearea" | "stackedsplinearea100" | "steparea" | "stackedsteparea" | "stackedsteparea100" | "rangearea" | "splinerangearea" | "steprangearea" | "column" | "stackedcolumn" | "stackedcolumn100" | "rangecolumn" | "scatter" | "stackedscatter" | "stackedscatter100" | "bubble" | "stackedbubble" | "stackedbubble100" | "pie" | "donut" | "candlestick" | "ohlc" | "waterfall" | "stackedwaterfall"

ChartSerieGroupOrientations: "vertical" | "horizontal"

Interface ChartFormatSettings {
  prefix?: string;
  sufix?: string;
  decimalSeparator?: string;
  thousandsSeparator?: string;
  decimalPlaces?: number;
  negativeWithBrackets?: boolean;
  dateFormat?: string;
}

Interface ChartXAxis {
  visible?: boolean;
  unitInterval?: number;
  dataField?: string;
  displayText?: string;
  type?: ChartAxisType;
  baseUnit?: ChartDateAxisBaseUnit;
  valuesOnTicks?: boolean;
  dateFormat?: string;
  axisSize?: number | string;
  customDraw?: boolean;
  flip?: boolean;
  position?: ChartAxisPosition;
  padding?: ChartPadding;
  title?: ChartAxisTitle;
  tickMarks?: ChartTickMarks;
  gridLines?: ChartGridLines;
  line?: ChartAxisLine;
  labels?: ChartAxisLabels;
  logarithmicScale?: boolean;
  logarithmicScaleBase?: number;
  minValue?: any;
  maxValue?: any;
  bands?: Array<ChartColorBand>;
  alternatingBackgroundColor?: string;
  alternatingBackgroundColor2?: string;
  alternatingBackgroundOpacity?: number;
  formatSettings?: any;
  formatFunction?: any;
  toolTipFormatSettings?: ChartFormatSettings;
  toolTipFormatFunction?: any;
  rangeSelector?: any;
  textRotationAngle?: number;
}

Interface ChartSerie {
  dataField: string;
  displayText: string;
  dataFieldFrom: string;
  displayTextFrom: string;
  dataFieldTo: string;
  displayTextTo: string;
  dataFieldOpen: string;
  displayTextOpen: string;
  dataFieldLow: string;
  displayTextLow: string;
  dataFieldHigh: string;
  displayTextHigh: string;
  dataFieldClose: string;
  displayTextClose: string;
  lineWidth?: number;
  dashStyle?: string;
  symbolType?: ChartSeriesSymbolType;
  symbolSize?: number;
  symbolSizeSelected?: number;
  emptyPointsDisplay?: ChartEmptyPointsDisplay;
  linesUnselectMode?: ChartLinesUnselectMode;
  opacity?: number;
  useGradientColors?: boolean;
  greyScale?: boolean;
  lineColor?: string;
  lineColorSelected?: string;
  fillColor?: string;
  fillColorSelected?: string;
  lineColorSymbol?: string;
  lineColorSymbolSelected?: string;
  fillColorSymbol?: string;
  fillColorSymbolSelected?: string;
  fillColorAlt?: string;
  fillColorAltSelected?: string;
  colorFunction?: (dataValue: any, itemIndex?: number, serie?: any, group?: any) => any;
  labels?: ChartSeriesLabels;
  formatSettings?: ChartFormatSettings;
  formatFunction?: (value: any, itemIndex?: number, serieIndex?: number, groupIndex?: number, xAxisValue?: any, xAxis?: ChartXAxis) => string;
  legendFormatSettings?: ChartFormatSettings;
  legendFormatFunction?: (value: any, itemIndex?: number, serieIndex?: number, groupIndex?: number, xAxisValue?: any, xAxis?: ChartXAxis) => string;
  legendLineColor?: string;
  legnedFillColor?: string;
  toolTipFormatSettings?: ChartFormatSettings;
  toolTipFormatFunction?: (value: any, itemIndex?: number, serieIndex?: number, groupIndex?: number, xAxisValue?: any, xAxis?: ChartXAxis) => string;
  toolTipLineColor?: string;
  toolTipBackground?: string;
  toolTipClass?: string;
  radius?: any;
  innerRadius?: any;
  startAngle?: number;
  endAngle?: number;
  offsetX?: number;
  offsetY?: number;
  hiddenPointsDisplay?: boolean;
  enableSeriesToggle?: boolean;
  enableSelection?: boolean;
  radiusDataField: string;
  minRadius: any;
  maxRadius: any;
  summary: string;
  labelRadius: any;
  initialAngle: number;
  centerOffset: number;
}

Interface ChartValueAxis {
  visible?: boolean;
  flip?: boolean;
  position?: ChartAxisPosition;
  axisSize?: number | string;
  minValue?: number;
  maxValue?: number;
  baselineValue?: number;
  logarithmicScale?: boolean;
  logarithmicScaleBase?: number;
  valuesOnTicks?: boolean;
  unitInterval?: number;
  title?: ChartAxisTitle;
  labels?: ChartAxisLabels;
  gridLines?: ChartGridLines;
  tickMarks?: ChartTickMarks;
  padding?: ChartPadding;
  bands?: Array<ChartColorBand>;
  alternatingBackgroundColor?: string;
  alternatingBackgroundColor2?: string;
  alternatingBackgroundOpacity?: number;
  toolTipFormatSettings?: ChartFormatSettings;
  formatFunction?: any;
}

Interface ChartSeriesGroup {
  type?: ChartSerieTypes;
  orientation?: ChartSerieGroupOrientations;
  valueAxis?: ChartValueAxis;
  series?: Array<ChartSerie>;
  formatSettings?: ChartFormatSettings;
  toolTipFormatFunction?: any;
  columnsGapPercent?: number;
  seriesGapPercent?: number;
  columnsMinWidth?: number;
  columnsMaxWidth?: number;
  columnsTopWidthPercent?: number;
  columnsBottomWidthPercent?: number;
  skipOverlappingPoints?: boolean;
  polar?: boolean;
  spider?: boolean;
  radius?: any;
  startAngle?: number;
  endAngle?: number;
  offsetX?: number;
  offsetY?: number;
  source?: any;
  xAxis?: ChartXAxis;
  colorScheme?: string;
  showLabels?: boolean;
  alignEndPointsWithIntervals?: boolean;
  annotations?: any;
}

The seriesGroups property is used to describe all series displayed on the chart. jqxChart supports multiple series of different types and series grouping. Each series group may have its own Value Axis (Y-axis) which allows you to have values with different scales displayed on the same chart at the same time. It also allows you to display multiple series types together on the same chart. For example, you can display all series in one group as lines and the series in a second group as columns.


seriesGroups:
[
    {
        type: 'stackedarea100',
        orientation: 'vertical',
        series: [
                { dataField: 'SearchNonPaid', displayText: 'Non-Paid Search Traffic' },
                { dataField: 'SearchPaid', displayText: 'Paid Search Traffic' },
                { dataField: 'Referral', displayText: 'Referral Traffic' }
            ],
        bands:
        [
            { minValue: 2000, maxValue: 2500, color: '#FF0000', opacity: 0.15},
            { minValue: 1000, maxValue: 1100, color: '#FF0000', opacity: 0.20}
        ]
            
    }
]
The seriesGroups is an array of objects where each object represents one group. A group may have the following properties:
  • type - sets the chart type. jqxChart supports several common chart types. You can easily plot series of different types on a common chart. A type must be specified for each series group. Currently jqxChart supports the following series types:
    • column - simple column series
    • stackedcolumn - stacked column series
    • stackedcolumn100 - percentage stacked columns
    • rangecolumn - floating column between two values
    • waterfall - waterfall series
    • stackedwaterfall - stacked waterfall series
    • line - simple streight lines connecting the value points
    • stackedline - stacked lines
    • stackedline100 - percentage stacked lines
    • spline - smooth lines connecting the value points
    • stackedspline - smooth stacked lines
    • stackedspline100 - percentage stacked smooth lines
    • stepline - step line
    • stackedstepline - stacked step line
    • stackedstepline100 - percentage stacked step line
    • area - area connecting the value points with streight lines
    • stackedarea- stacked area with streight lines between the points
    • rangearea - floating area between pairs of value points
    • stackedline100 - percentage stacked area
    • splinearea - smooth area connecting the value points
    • splinerangearea - smooth floating area between pairs of value points
    • stackedsplineara - smooth stacked area
    • stackedsplinearea100 - percentage stacked smooth area
    • steplinearea - step area connecting the value points
    • stackedsteplineara - step stacked area
    • stackedsteplinearea100 - percentage stacked step area
    • pie - circular chart divided into sectors, illustrating proportion
    • donut - chart divided into circular sectors with different inner and outer radius
    • scatter - data is displayed as a collection of points
    • stackedscatter - data is displayed as a collection of points and the values are stacked
    • stackedscatter100 - data is displayed as a collection of points and the values are percentage stacked
    • bubble - data is displayed as a collection of bubbles
    • stackedbubble - data is displayed as a collection of bubbles and the values are stacked
    • stackedbubble100 - data is displayed as a collection of bubbles and the values are percentage stacked
    • candlestick - display candlestick series using open, high, low, close data points
    • ohlc - display OHLC series using open, high, low, close data points
  • orientation - specifies the orientation of the series group.
    • vertical - the valueAxis is displayed vertically and the xAxis horizontally.
    • horizontal - the valueAxis is displayed horizontally and the xAxis vertically
  • valueAxis - object describing the valueAxis for this group. jqxChart allows you to use a common valueAxis and/or multiple value axes per serie group.
  • columnsGapPercent - percentage gap between columns within the same serie. The default value is 25.
  • seriesGapPercent - percentage gap between columns belonging to different series. The default value is 10.
  • columnsMaxWidth - maximum width of columns in column series.
  • columnsMinWidth - minimum width of columns in column series.
  • columnsTopWidthPercent - columns top width (as percentage of the total width). The default value is 100.
  • columnsBottomWidthPercent - columns bottom width (as percentage of the total width). The default value is 100.
  • skipOverlappingPoints - determines whether to display overlapping data points in column, ohlc and candlestick series. The default value is true.
  • polar - a boolean value. When polar is set to 'true' the chart will render in polar coordinates.
  • spider - a boolean value. When spider is set to 'true' the chart will render in polar coordinates.
  • radius - the radius of the polar coordinate system. Applicable to polar and spider charts only.
  • startAngle - the start angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.
  • endAngle - the end angle (in degrees) of the polar coordinate system. Applicable to polar and spider charts only.
  • offsetX - horizontal position of the center of the polar coordinate system. Applicable to polar and spider charts only.
  • offsetY - vertical position of the center of the polar coordinate system. Applicable to polar and spider charts only.
  • series - an array of chart series.

    Each serie has the following properties:

    • dataField - name of the field in the data source.
    • displayText - name to display for this serie.
    • dataFieldOpen, dataFieldHigh, dataFieldLow, dataFieldClose - names of the fields in the data source used in candlestcik and ohlc series
    • displayTextOpen, displayTextHigh, displayTextLow, displayTextClose - names to display for candlestick and ohlc series.
    • colorScheme - color palette to use when rendering the serie.
    • color - (Deprecated) fill color for the serie.
    • lineColor - Line color for the serie.
    • lineColorSelected - Line color for the serie when selected.
    • fillColor - Fill color for the serie.
    • fillColorSelected - Fill color for the serie when selected.
    • fillColorAlt - Alternating fill color for the serie. Applicable to OHLC series only.
    • fillColorAltSelected - Alternating fill color for the serie when selected. Applicable to OHLC series only.
    • lineColorSymbol - Line color for the marker symbols in serie.
    • lineColorSymbolSelected - Line color for the marker symbols in the serie when selected.
    • fillColorSymbol - Fill color for the marker symbols in the serie.
    • fillColorSymbolSelected - Fill color for the the marker symbols in serie when selected.
    • colorFunction - a custom function that returns the color of a data point. The function will received the following parameters: dataValue, itemIndex, serie, group The implementation of the function can return a single color which will be used as a fillColor and the other colors will be derived or it can return an object containing fillColor, fillColorSelected, etc.
    • greyScale - boolean that determines whether to display the serie in grey scale.
    • legendFormatSettings - legend data formatting settings for the values in the serie.
    • legendFormatFunction - legend data formatting function for the values in the serie.
    • legendFillColor - fill color of the legend box. The default value is inherited by the serie's color.
    • legendLineColor - line color of the legend box. The default value is inherited by the serie's color.
    • toolTipFormatSettings - tooltip data formatting settings for the values in the serie.
    • toolTipFormatFunction - tooltip data formatting function for the values in the serie.
    • toolTipLineColor - determines the tooltip's border lines color.
    • toolTipBackground - determines the tooltip's background.
    • toolTipClass - determines the tooltip's CSS class name.
    • useGradient - determines whether to use color gradients.
    • opacity - determines the opacity of the items in this serie.
    • lineWidth - determines the line tickness of the items in this serie.
    • lineDashStyle - a string sequence of numbers represening line and space lengths, e.g. '2,2'
    • emptyPointsDisplay - determines how to display value gaps in line series. Possible values are: 'connect', 'skip' and 'zero'
    • linesUnselectMode - determines how line and area series are unselected based on mouse and touch events. Possible values are 'click' or 'default'. If the value is set to 'click', once a line or area serie is selected, it will remain selected until the user clicks or moves the cursor outside the chart. In default mode, the serie will be unselected immediatelly after the cursor moves over another serie or outside the chart.
    • symbolType - determines the symbol type displayed for the data points in the serie. This parameter is applicable to line, area, scatter and bubble series only. Acceptable values are: 'none', 'circle', 'square', 'diamond', 'triangle_up', 'triangle_down', 'triangle_left', 'triangle_right'
    • symbolSize - determines the size of the symbol element
    • symbolSizeSelected - determines the size of the symbol element. This paramters is applicable to line and area series only.
    • labels - object describing the labels properties of the axis
      • visible - true/false/'custom' determining the visibility. When 'custom' is set, displays only custom values/offsets.
      • offset - labels offset, e.g {x: -5, y: 0}.
      • angle - text rotation angle.
      • horizontalAligment - horizontal labels alignment.
      • verticalAligment - vertical labels alignment.
      • class - CSS class of the labels.
      • backgroundColor - labels background color.
      • backgroundOpacity - labels background opacity.
      • borderColor - labels border line color.
      • borderOpacity - labels border line opacity.
      • padding - object describing the padding of the labels
        • left - left padding.
        • right - right padding.
        • top - top padding.
        • bottom - bottom padding.
      • autoRotate - boolean determining if auto rotation is enabled.
      • formatSettings - object describing the format settings of the labels.
      • formatFunction - callback function used to format the labels.
      • radius - radius of the labels in pie/donut series.
      • linesEnabled - determines whether to use lines for the labels in pie/donut series.
      • linesAngles - determines whether to use direct lines for the labels in pie/donut series.
      • custom - an array of custom values/offsets where a label/tickmark/gridline will be displayed.
    • radius - outer radius of pie and donut series in pixels or percents.
    • innerRadius - inner radius of donut series in pixels or percents.
    • selectedRadiusChange - radius change on selection of pie and donut series in pixels or percents.
    • initialAngle - initial angle in pie and donut series.
    • startAngle - minimum angle in a pie, donut, polar and spider series
    • endAngle - maximum angle in a pie, donut, polar and spider series
    • centerOffset - offset from the center point in a pie/donut series.
    • hiddenPointsDisplay - determines whether to hide slices of toggled points in pie and donut series.
    • enableSeriesToggle - determines whether to toggle the series visibility after click on a legend's box.
    • enableSelection - determines whether the serie is selectable.
  • annotations - an array of chart annotation objects.

    Each annotation has the following properties:

    • yValue - value to determine the vertical offset of the annotation.
    • xValue - value to determine the horizontal offset of the annotation.
    • yValue2 - optional 2nd value to determine the vertical offset of the annotation's bottom-right point.
    • xValue2 - optional 2nd value to determine the horizontal offset of the annotation bottom-right point.
    • offset - custom offset of the annotation relative to xValue & yValue, e.g. { x: -45, y: -25}
    • width - width of the annotation
    • height - width of the annotation
    • fillColor - fill/background color of the annotation.
    • lineColor - line color of the annotation.
    • type - shape type of the annotation, e.g. 'rect, circle, line, path'.
    • radius - radius of the annotation in case its type is 'circle'.
    • path - line path command in case the type is 'path', e.g. 'M 10,10 L 20,20 L 50,50'.
    • text - object describing the text of the annotation:
      • value - text of the annotation.
      • class - CSS class of the annotation.
      • angle - text rotation angle.
      • offset - offset of the annotation text relative to the base annotation offset, e.g. { x: 5, y: 10}
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Events

toggle Event
The event is raised when a serie is toggled by a user click in the chart's legend or through an API call.

Code examples

Bind to the toggle event of jqxChart. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart} onToggle={this.onToggle}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
 
  private onToggle(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
click Event
The event is raised when the user clicks on series element.

Code examples

Bind to the click event of jqxChart. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
  
  public render() {
    return (
      <JqxChart ref={this.myChart} onClick={this.onClick}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
 
  private onClick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
refreshBegin Event
The event is raised when the chart begins rendering.

Code examples

Bind to the refreshBegin event of jqxChart.

refreshEnd Event
The event is raised when the chart finishes rendering.

Code examples

Bind to the refreshEnd event of jqxChart.

rangeSelectionChanging Event
The event is raised after the chart's range selector position changes and after the chart ends rendering.

Code examples

Bind to the rangeSelectionChanging event of jqxChart.

rangeSelectionChanged Event
The event is raised when the chart's range selector position changes and before the chart starts rendering.

Code examples

Bind to the rangeSelectionChanged event of jqxChart.

Methods

NameArgumentsReturn Type
getInstance

Method: getInstance

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.getInstance();
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
refresh
Refreshes the jqxChart 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.refresh();
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
update
Updates the jqxChart 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.update();
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
destroy
destroys the jqxChart instance 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.destroy();
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
addColorScheme schemeName, colors
Adds a new color sheme. If a scheme with the same name already exists the method will update its colors.
removeColorScheme schemeName
Removes an existing color scheme. If the scheme does not exist the method has no effect. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.removeColorScheme('scheme01');
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getItemsCount groupIndex, serieIndex
Gets the number of rendered items in a specific serie. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.getItemsCount(0,1,0);
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getItemCoord groupIndex, serieIndex, itemIndex
Gets the rendered coordinates of a data point element. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.getItemCoord(0,1,0);
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getXAxisRect groupIndex
Gets the rendered rectangle coordinates of the x-Axis of specific serie group. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.getXAxisRect(0);
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getXAxisLabels groupIndex
Gets the rendered coordinates and values of the xAxis labels. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.getXAxisLabels(0);
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getValueAxisRect groupIndex
Gets the rendered rectangle coordinates of the valueAxis of specific serie group. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.getValueAxisRect(0);
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getValueAxisLabels groupIndex
Gets the rendered coordinates and values of the valueAxis labels. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.getValueAxisLabels(0);
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getColorScheme colorScheme
Returns the colors of a color scheme by name. If the scheme doesn't exist the method returns undefined. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.getColorScheme('scheme01');
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
hideSerie groupIndex, serieIndex, itemIndex
Hides a chart serie. The result of calling this function is same as the user unchecking the legend box of a chart serie. The itemIndex parameter is optional and applicable to pie and donut series only. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.hideSerie(0,1);
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showSerie groupIndex, serieIndex, itemIndex
Shows a chart serie. The result of calling this function is same as the user checking the legend box of a chart serie. The itemIndex parameter is optional and applicable to pie and donut series only.
hideToolTip hideDelay
Hides the current tooltip if visible. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.hideToolTip(100);
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showToolTip groupIndex, serieIndex, itemIndex, showDelay, hideDelay
Shows a the tooltip for a perticular data point. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.showToolTip(0,0,1,100,100);
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
saveAsJPEG fileName, exportServerUrl
Exports the chart's content as JPEG image. The browser must support HTML5 Canvas and the device must be able to connect to the export server. If you don't setup your own export server the default server is jqwidgets.com 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.saveAsJPEG('chartImage.jpeg','https://www.jqwidgets.com/export_server/export.php');
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
saveAsPNG fileName, exportServerUrl
Exports the chart's content in PNG document. The browser must support HTML5 Canvas and the device must be able to connect to the export server. If you don't setup your own export server the default server is jqwidgets.com 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.saveAsPNG('chartImage.png','https://www.jqwidgets.com/export_server/export.php');
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
saveAsPDF fileName, exportServerUrl
Exports the chart's content in PDF document. The browser must support HTML5 Canvas and the device must be able to connect to the export server. If you don't setup your own export server the default server is jqwidgets.com 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.saveAsPDF('chartImage.pdf','https://www.jqwidgets.com/export_server/export.php');
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getXAxisValue offset, groupIndex
Returns the value corresponding to a specific offset along the x-Axis 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.getXAxisValue(400,0);
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getValueAxisValue offset, groupIndex
Returns the value corresponding to a specific offset along the valueAxis 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxChart, { IChartProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxchart';
 
class App extends React.PureComponent<{}, IChartProps> {
  private myChart = React.createRef<JqxChart>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          { Day: 'Monday', Keith: 0, Erica: 20, George: 10 },
          { Day: 'Tuesday', Keith: 20, Erica: 30, George: 40 }
        ],
        xAxis: { dataField: 'Day' },
        seriesGroups: [{
          type: 'column',
          columnsGapPercent: 50,
          seriesGapPercent: 0,
          valueAxis: { minValue: 0, description: 'Time in minutes' },
          series: [
            { dataField: 'Keith', displayText: 'Keith' },
            { dataField: 'Erica', displayText: 'Erica' },
            { dataField: 'George', displayText: 'George' }
          ]
        }]
    }
  }
 
  public componentDidMount(): void {
    this.myChart.current!.getValueAxisValue(100,0);
  }
   
  public render() {
    return (
      <JqxChart ref={this.myChart}  style={{ width: 850, height: 500 }}
        title={'Fitness & Exercise Weekly Scorecard'} description={'Time Spent in Vigorous Exercise'}
        enableAnimations={true} source={this.state.source} xAxis={this.state.xAxis}
        seriesGroups={this.state.seriesGroups} colorScheme={'scheme02'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);