React UI Components Documentation

Determines the rendering engine used to display the chart. Possible values are 'SVG', 'VML' and 'HTML5'. When the property is not set jqxDraw 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 JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
        renderEngine={''}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets attributes of an element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.attr(textElement, { fill: 'lightblue', stroke: 'darkblue' });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Creates a circle element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.circle(85,300, 50, {});
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Clears the content of the jqxDraw widget

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.clear();
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets element's attribute

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.getAttr(circleElement, 'fill');
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Method: getSize

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.getSize();
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Creates a line element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.line(85,100,85,200, { stroke: 'blue', 'stroke-width': 6 });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Estimates the size of a text element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.measureText('My text', 45, { 'class': 'smallText' });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Adds an event handler to an element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.on(circleElement, 'click', () => { alert('Clicked The Big Circle!') });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Removes an event handler from an element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.off(pathDown,'click',moveCircle(false));
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Creates a path element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.path('M10 160 L 160 160 L80 320 Z', { fill: 'transparent', stroke: 'blue', 'stroke-width': 1 });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Creates a pie slice element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.pieslice(50, 350, 50, 100, 15, 95, 0, {fill: 'yellow'});
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refreshes / re-draws the content of the jqxDraw widget

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.refresh();
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Creates a rectangle element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.rect(20,280,130,50, { stroke: 'blue', fill: 'transparent' });
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Exports the content as JPEG image

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.saveAsJPEG('myImage.jpeg', 'http:///export_server/server.php');
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Exports the chart's content as PNG image

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.saveAsPNG('myImage.png', 'http:///export_server/server.php');
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Creates a text element

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDraw, { IDrawProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdraw';
 
class App extends React.PureComponent<{}, IDrawProps> {
  private myDraw = React.createRef<JqxDraw>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    const size = this.myDraw.current!.getSize();
      const borderElement = this.myDraw.current!.rect(0, 0, size.width - 680, size.height, { stroke: '#777777', fill: 'transparent' });
      const textElement = this.myDraw.current!.text('Drawing shapes', 35, 20, undefined, undefined, 0, { 'class': 'largeText', fill: 'yellow', stroke: 'orange' }, false, 'center', 'center', 'centermiddle');
      const circleElement = this.myDraw.current!.circle(85, 150, 50, {});
      this.myDraw.current!.attr(circleElement, { fill: 'lightblue', stroke: 'darkblue' });
      const circleUp = this.myDraw.current!.circle(50, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathUp = this.myDraw.current!.path('M30 460 L 70 460 L50 430 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      const circleDown = this.myDraw.current!.circle(120, 450, 30, { fill: '#DEDEDE', stroke: '#777777' });
      const pathDown = this.myDraw.current!.path('M100 440 L 140 440 L120 470 Z', { fill: 'transparent', stroke: '#777777', 'stroke-width': 1 });
      this.myDraw.current!.text('Click these buttons:', 20, 390);
      const moveCircle = moveUp => { 
        const circleY = parseInt(this.myDraw.current!.getAttr(circleElement, 'cy')); 
        this.myDraw.current!.attr(circleElement, { cy: circleY + (moveUp ? -10 : 10) }); 
      }
      this.myDraw.current!.on(circleUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(pathUp, 'click', () => { moveCircle(true); }); 
      this.myDraw.current!.on(circleDown, 'click', () => { moveCircle(false); }); 
      this.myDraw.current!.on(pathDown, 'click', () => { moveCircle(false); });
    this.myDraw.current!.text('Some More Text!', 30, 280, undefined, undefined, 0, { 'class': 'largeText', fill: 'blue', stroke: 'blue' }, false, 'center', 'center', 'centermiddle');
  }
  
  public render() {
    return (
      <JqxDraw ref={this.myDraw}  style={{ width: 850, height: 500 }}
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);