| Name | Type | Default |
|---|
|
title
|
String
|
Chart title
|
Sets or gets the title property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} title={ 'My Title'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
description
|
String
|
Description
|
Sets or gets the description property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} description={ 'My Description'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
source
|
Object
|
[]
|
Sets or gets the source property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
showBorderLine
|
Boolean
|
true
|
Sets or gets the showBorderLine property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} showBorderLine={false} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
borderLineColor
|
String
|
#888888
|
Sets or gets the borderLineColor property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} borderLineColor={ '#111888'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
borderLineWidth
|
Number
|
1
|
Sets or gets the borderLineWidth property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} borderLineWidth={3} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
backgroundColor
|
String
|
#FFFFFF
|
Sets or gets the backgroundColor property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} backgroundColor={ '#FFFFFF'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
backgroundImage
|
String
|
''
|
Sets or gets the backgroundImage property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} backgroundImage={ '../images/chart_background.jpg'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
showLegend
|
Boolean
|
true
|
Sets or gets the showLegend property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} showLegend={true} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
legendLayout
|
Object
|
{}
|
Sets or gets the legendLayout property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} legendLayout={legendLayout} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
categoryAxis
|
Object
|
{}
|
Sets or gets the categoryAxis property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} categoryAxis={categoryAxis} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
padding
|
Object
|
{left: 5, top: 5, right: 5, bottom: 5}
|
Sets or gets the padding property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
titlePadding
|
Object
|
{left: 2, top: 2, right: 2, bottom: 2}
|
Sets or gets the titlePadding property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
colorScheme
|
String
|
scheme01
|
Sets or gets the colorScheme property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} colorScheme={ 'scheme03'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
greyScale
|
Boolean
|
false
|
Sets or gets the greyScale property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} greyScale={true} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
showToolTips
|
Boolean
|
true
|
Sets or gets the showToolTips property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} showToolTips={false} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
toolTipShowDelay
|
Number
|
500
|
Sets or gets the toolTipShowDelay property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} toolTipShowDelay={300} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
toolTipHideDelay
|
Number
|
4000
|
Sets or gets the toolTipHideDelay property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} toolTipHideDelay={300} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
toolTipMoveDuration
|
Number
|
300
|
Sets or gets the toolTipMoveDuration property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} toolTipMoveDuration={200} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
drawBefore
|
Function
|
null
|
Sets or gets the drawBefore property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} drawBefore={drawBefore} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
draw
|
Function
|
null
|
Sets or gets the draw property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} draw={draw} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
rtl
|
Boolean
|
false
|
Sets or gets the rtl property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} rtl={true} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
enableCrosshairs
|
Boolean
|
false
|
Sets or gets the enableCrosshairs property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} enableCrosshairs={false} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
crosshairsColor
|
String
|
#888888
|
Sets or gets the crosshairsColor property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} crosshairsColor={ '#111888'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
crosshairsDashStyle
|
String
|
2,2
|
Sets or gets the crosshairsDashStyle property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} crosshairsDashStyle={ '1,1'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
crosshairsLineWidth
|
Number
|
1
|
Sets or gets the crosshairsLineWidth property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} crosshairsDashStyle={true} crosshairsLineWidth={2} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
columnSeriesOverlap
|
Boolean
|
false
|
Sets or gets the columnSeriesOverlap property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} columnSeriesOverlap={true} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
enabled
|
Boolean
|
true
|
Sets or gets the enabled property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} enabled={false} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
enableAnimations
|
Boolean
|
true
|
Sets or gets the enableAnimations property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} enableAnimations={false} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
animationDuration
|
Number
|
500
|
Sets or gets the animationDuration property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} animationDuration={1500} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
enableAxisTextAnimation
|
Boolean
|
false
|
Sets or gets the enableAxisTextAnimation property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} enableAxisTextAnimation={true} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
renderEngine
|
String
|
auto
|
Sets or gets the renderEngine property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} renderEngine={ 'HTML5'} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
xAxis
|
Object
|
null
|
Sets or gets the xAxis property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
valueAxis
|
Object
|
null
|
Sets or gets the valueAxis property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
seriesGroups
|
Array
|
null
|
Sets or gets the seriesGroups property.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
|
toggle
|
Event
|
|
Code examples
Bind to the toggle event of jqxChart.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.on('toggle', (event) => { // Do Something... }); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
click
|
Event
|
|
Code examples
Bind to the click event of jqxChart.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.on('click', (event) => { // Do Something... }); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
mouseOver
|
Event
|
|
Code examples
Bind to the mouseOver event of jqxChart.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.on('mouseOver', (event) => { // Do Something... }); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
mouseOut
|
Event
|
|
Code examples
Bind to the mouseOut event of jqxChart.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.on('mouseOut', (event) => { // Do Something... }); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
refreshBegin
|
Event
|
|
Code examples
Bind to the refreshBegin event of jqxChart.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.on('refreshBegin', (event) => { // Do Something... }); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
refreshEnd
|
Event
|
|
Code examples
Bind to the refreshEnd event of jqxChart.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.on('refreshEnd', (event) => { // Do Something... }); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
rangeSelectionChanging
|
Event
|
|
Code examples
Bind to the rangeSelectionChanging event of jqxChart.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.on('rangeSelectionChanging', (event) => { // Do Something... }); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
rangeSelectionChanged
|
Event
|
|
Code examples
Bind to the rangeSelectionChanged event of jqxChart.
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.on('rangeSelectionChanged', (event) => { // Do Something... }); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
|
| Name | Return Type |
|---|
|
getInstance
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myChart.getInstance(); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
refresh
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.refresh(); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
update
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.update(); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
destroy
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.destroy(); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
addColorScheme
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.addColorScheme('scheme99',['#722694', '#AA4643', '#89A54E', '#71588F', '#4198AF']); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
removeColorScheme
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.removeColorScheme('scheme01'); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getItemsCount
|
Number
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myChart.getItemsCount(0,1,0); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getItemCoord
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myChart.getItemCoord(0,1,0); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getXAxisRect
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myChart.getXAxisRect(0); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getXAxisLabels
|
Array
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myChart.getXAxisLabels(0); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getValueAxisRect
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myChart.getValueAxisRect(0); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getValueAxisLabels
|
Array
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myChart.getValueAxisLabels(0); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getColorScheme
|
Array
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myChart.getColorScheme('scheme01'); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
hideSerie
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.hideSerie(0,1,0); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
showSerie
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.showSerie(0,1,0); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
hideToolTip
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.hideToolTip(100); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
showToolTip
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.showToolTip(0,0,0,100,100); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
saveAsJPEG
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.saveAsJPEG('chartImage.jpeg','http://myServer.com'); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
saveAsPNG
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.saveAsPNG('chartImage.png','http://myServer.com'); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
saveAsPDF
|
None
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { this.refs.myChart.saveAsPDF('chartImage.pdf','http://myServer.com'); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getXAxisValue
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myChart.getXAxisValue(10,0); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
|
getValueAxisValue
|
Object
|
import React from 'react';import ReactDOM from 'react-dom'; import JqxChart from 'jqwidgets-react/react_jqxchart.js'; class App extends React.Component { componentDidMount() { let value = this.refs.myChart.getValueAxisValue(10,0); } render() { let sampleData = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; let padding = { left: 5, top: 5, right: 5, bottom: 5 }; let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 }; let xAxis = { dataField: 'Day', unitInterval: 1, tickMarks: { visible: true, interval: 1, color: '#CACACA' }, gridLines: { visible: false, interval: 1, color: '#CACACA' } }; let valueAxis = { minValue: 0, maxValue: 100, unitInterval: 10, title: { text: 'Time in minutes' }, tickMarks: { color: '#CACACA' }, gridLines: { color: '#CACACA' } }; let seriesGroups = [ { type: 'splinearea', series: [ { greyScale: true, dataField: 'Goal', displayText: 'Personal Goal', opacity: 0.7 } ] }, { type: 'stackedcolumn', columnsGapPercent: 50, seriesGapPercent: 5, series: [ { greyScale: true, dataField: 'Running', displayText: 'Running' }, { greyScale: true, dataField: 'Swimming', displayText: 'Swimming' }, { greyScale: false, dataField: 'Cycling', displayText: 'Cycling' } ] } ]; return ( <JqxChart ref= 'myChart' width={850} height={500} source={sampleData} title={ 'My Title'} description={'myDescription'} padding={padding} titlePadding={titlePadding} xAxis={xAxis} valueAxis={valueAxis} seriesGroups={seriesGroups} /> ) } } ReactDOM.render( <App />, document.getElementById( 'app'));
|
