React UI Components

Show Demo List

Theme:

Demo
App.htm
App.js

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id='Description'>
        This is an example of React Chart horizontal layout, range columns and color bands. The type of the seriesGroups is rangecolumn. You can see how to set the minimum value, the maximum value and the color of the bands.
    </title>
    <meta name="description" content="This React Chart demo showcases Range and Bands'" />
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        This is an example of React Chart horizontal layout, range columns and color bands. The type of the seriesGroups is rangecolumn. You can see how to set the minimum value, the maximum value and the color of the bands.
    </div>
    <div id="app"></div>
    <script src="../build/chart_colorbands.bundle.js"></script>
</body>
</html>

import React from 'react';import ReactDOM from 'react-dom';import JqxChart from '../../../jqwidgets-react/react_jqxchart.js';class App extends React.Component {
    render() {
        let data = [
            { Person: 'Planning', M1_From: 2, M1_To: 5, M2_From: 5, M2_To: 10 },
            { Person: 'Dev 1', M1_From: 5, M1_To: 7, M2_From: 9, M2_To: 17 },
            { Person: 'Dev 2', M1_From: 5, M1_To: 12, M2_From: 14, M2_To: 22 },
            { Person: 'QA 1', M1_From: 7, M1_To: 14, M2_From: 14, M2_To: 25 }
        ];
        let toolTipCustomFormatFn = (value, itemIndex, serie, group, categoryValue, categoryAxis) => {
            var dataItem = data[itemIndex];
            return '<DIV style="text-align:left"><b>Team: ' + categoryValue +
                '</b><br />Start day: ' + value.from +
                '<br />End day: ' + value.to;
        };

        let padding = { left: 5, top: 5, right: 10, bottom: 5 };

        let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };

        let xAxis =
            {
                dataField: 'Person',
                unitInterval: 1,
                tickMarks: {
                    visible: true,
                    interval: 1,
                    color: '#BCBCBC'
                }
            };

        let seriesGroups =
            [
                {
                    orientation: 'horizontal',
                    type: 'rangecolumn',
                    columnsGapPercent: 100,
                    toolTipFormatFunction: toolTipCustomFormatFn,
                    valueAxis:
                    {
                        flip: true,
                        minValue: 1,
                        maxValue: 30,
                        unitInterval: 1,
                        title: { text: 'Day' },
                        tickMarks: { color: '#BCBCBC' }
                    },
                    series: [
                        { dataFieldFrom: 'M1_From', dataFieldTo: 'M1_To', displayText: 'Sprint 1', opacity: 1 },
                        { dataFieldFrom: 'M2_From', dataFieldTo: 'M2_To', displayText: 'Sprint 2', opacity: 1 }
                    ],
                    bands:
                    [
                        { minValue: 13, maxValue: 16, color: '#00FF00', opacity: 0.15 },
                        { minValue: 24, maxValue: 27, color: '#0000FF', opacity: 0.20 },
                        { minValue: 29, maxValue: 29, color: '#FF0000', opacity: 0.5, lineWidth: 3 }
                    ]
                }
            ];
        return (
            <JqxChart style={{ width: 850, height: 500 }}
                title={'Monthly Project Schedule'} description={'Website update plan'}
                showLegend={true} enableAnimations={true} padding={padding}
                titlePadding={titlePadding} source={data} xAxis={xAxis}
                colorScheme={'scheme03'} seriesGroups={seriesGroups}
            />
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));