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 padding and spacing of columns series. In order to prevent adjacent columns overlap you have to set the skipOverlappingPoints setting to true. You can see how to set the columns and the series gap percent. If you want the columns in the two series groups to overlap you have to set the columnSeriesOverlap setting to true. You can also see how to set the columns spacing and the minimum and maximum column width.
    </title>
    <meta name="description" content="This React Chart demo showcases how to add spacing between Column Series'" />
    <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="../../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxslider.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 padding and spacing of columns series. In order to prevent adjacent columns overlap you have to set the skipOverlappingPoints setting to true. You can see how to set the columns and the series gap percent. If you want the columns in the two series groups to overlap you have to set the columnSeriesOverlap setting to true. You can also see how to set the columns spacing and the minimum and maximum column width.
    </div>
    <div id="app"></div>
    <script src="../build/chart_columnseriesspacing.bundle.js"></script>
</body>
</html>

import React from 'react';import ReactDOM from 'react-dom';import JqxChart from '../../../jqwidgets-react/react_jqxchart.js';import JqxCheckBox from '../../../jqwidgets-react/react_jqxcheckbox.js';import JqxSlider from '../../../jqwidgets-react/react_jqxslider.js';class App extends React.Component {
    componentDidMount() {
        this.setState({
            chartInstance: this.refs.myChart.getInstance()
        });

        this.refs.btnEnableSeriesGroup1.on('change', (event) => {
            this.updateSeriesGroupsVisibility();
        });
        this.refs.btnEnableSeriesGroup2.on('change', (event) => {
            this.updateSeriesGroupsVisibility();
        });

        this.refs.btnStackedSeriesGroup1.on('change', (event) => {
            this.updateSeriesGroupsStacking();
        });
        this.refs.btnStackedSeriesGroup2.on('change', (event) => {
            this.updateSeriesGroupsStacking();
        });

        this.refs.sliderColumnsGapPercentGroup1.on('change', (event) => {
            this.state.chartInstance.seriesGroups[0].columnsGapPercent = event.args.value;
            this.refs.myChart.refresh();
        });
        this.refs.sliderColumnsGapPercentGroup2.on('change', (event) => {
            this.state.chartInstance.seriesGroups[1].columnsGapPercent = event.args.value;
            this.refs.myChart.refresh();
        });

        this.refs.sliderSeriesGapGroup1.on('change', (event) => {
            this.state.chartInstance.seriesGroups[0].seriesGapPercent = event.args.value;
            this.refs.myChart.refresh();
        });
        this.refs.sliderSeriesGapGroup2.on('change', (event) => {
            this.state.chartInstance.seriesGroups[1].seriesGapPercent = event.args.value;
            this.refs.myChart.refresh();
        });
        
        this.refs.sliderMinWidthGroup1.on('change', (event) => {
            this.state.chartInstance.seriesGroups[0].columnsMinWidth = event.args.value;
            this.refs.myChart.refresh();
        });
        this.refs.sliderMinWidthGroup2.on('change', (event) => {
            this.state.chartInstance.seriesGroups[1].columnsMinWidth = event.args.value;
            this.refs.myChart.refresh();
        });
        
        this.refs.sliderMaxWidthGroup1.on('change', (event) => {
            this.state.chartInstance.seriesGroups[0].columnsMaxWidth = event.args.value;
            this.refs.myChart.refresh();
        });
        this.refs.sliderMaxWidthGroup2.on('change', (event) => {
            this.state.chartInstance.seriesGroups[1].columnsMaxWidth = event.args.value;
            this.refs.myChart.refresh();
        });
    }
    updateSeriesGroupsVisibility() {
        this.state.chartInstance.seriesGroups = [];
        if (this.refs.btnEnableSeriesGroup1.checked()) {
            this.state.chartInstance.seriesGroups.push(
                {
                    type: 'column',
                    columnsGapPercent: 25,
                    seriesGapPercent: 10,
                    columnsMaxWidth: 40,
                    columnsMinWidth: 1,
                    series: [
                        { dataField: 'Serie1', displayText: 'Serie1' },
                        { dataField: 'Serie2', displayText: 'Serie2' },
                        { dataField: 'Serie3', displayText: 'Serie3' }
                    ]
                });
        }
        if (this.refs.btnEnableSeriesGroup2.checked()) {
            this.state.chartInstance.seriesGroups.push(
                {
                    type: 'column',
                    greyScale: true,
                    columnsGapPercent: 25,
                    seriesGapPercent: 10,
                    columnsMaxWidth: 40,
                    columnsMinWidth: 1,
                    series: [
                        { dataField: 'Serie4', displayText: 'Serie4' },
                        { dataField: 'Serie5', displayText: 'Serie5' },
                        { dataField: 'Serie6', displayText: 'Serie6' }
                    ]
                });
        }
        this.updateSeriesGroupsStacking();
    }
    updateSeriesGroupsStacking() {
        if (this.refs.btnEnableSeriesGroup1.checked()) {
            if (this.refs.btnStackedSeriesGroup1.checked()) {
                this.state.chartInstance.seriesGroups[0].type = 'stackedcolumn';
            }
            else {
                this.state.chartInstance.seriesGroups[0].type = 'column';
            }
        }
        if (this.refs.btnEnableSeriesGroup2.checked()) {
            if (this.refs.btnStackedSeriesGroup2.checked()) {
                this.state.chartInstance.seriesGroups[this.state.chartInstance.seriesGroups.length - 1].type = 'stackedcolumn';
            }
            else {
                this.state.chartInstance.seriesGroups[this.state.chartInstance.seriesGroups.length - 1].type = 'column';
            }
        }
        this.refs.myChart.refresh();
    }
    render() {
        let sampleData = [
            { Position: 0, Serie1: 30, Serie2: 5, Serie3: 25, Serie4: 30, Serie5: 10, Serie6: 5 },
            { Position: 1, Serie1: 25, Serie2: 25, Serie3: 5, Serie4: 20, Serie5: 20, Serie6: 10 },
            { Position: 3, Serie1: 30, Serie2: 5, Serie3: 25, Serie4: 10, Serie5: 20, Serie6: 15 },
            { Position: 6, Serie1: 35, Serie2: 25, Serie3: 45, Serie4: 5, Serie5: 30, Serie6: 20 },
            { Position: 7, Serie1: 5, Serie2: 20, Serie3: 25, Serie4: 20, Serie5: 40, Serie6: 15 },
            { Position: 9, Serie1: 30, Serie2: 10, Serie3: 30, Serie4: 10, Serie5: 5, Serie6: 20 },
            { Position: 10, Serie1: 60, Serie2: 45, Serie3: 10, Serie4: 20, Serie5: 10, Serie6: 15 }
        ];

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

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

        let xAxis =
            {
                dataField: 'Position',
                tickMarks: {
                    visible: true,
                    interval: 1,
                    color: '#BCBCBC'
                },
                gridLines: {
                    visible: true,
                    interval: 1,
                    color: '#BCBCBC'
                },
                flip: false,
                valuesOnTicks: false
            };

        let valueAxis =
            {
                unitInterval: 10,
                title: { text: 'Value' },
                tickMarks: { color: '#BCBCBC' },
                gridLines: { color: '#BCBCBC' },
                labels: {
                    horizontalAlignment: 'right'
                },
            };

        let seriesGroups =
            [
                {
                    type: 'column',
                    columnsGapPercent: 25,
                    seriesGapPercent: 10,
                    columnsMaxWidth: 40,
                    columnsMinWidth: 1,
                    series: [
                        { dataField: 'Serie1', displayText: 'Serie1' },
                        { dataField: 'Serie2', displayText: 'Serie2' },
                        { dataField: 'Serie3', displayText: 'Serie3' }
                    ]
                }      
            ];
        return (
            <div>
                <JqxChart ref='myChart' style={{ width: 850, height: 500 }}
                    title={'Columns spacing and padding'} description={'Example with two series groups and three series in each group'}
                    showLegend={true} enableAnimations={false} padding={padding} columnSeriesOverlap={true}
                    titlePadding={titlePadding} source={sampleData} xAxis={xAxis}
                    valueAxis={valueAxis} colorScheme={'scheme04'} seriesGroups={seriesGroups}
                />
                <table style={{ paddingLeft: 30, paddingTop: 10 }}>
                    <tr style={{ height: 50 }}>
                        <td style={{ width: 300 }}>
                            <b>Series group 1:</b>
                        </td>
                        <td>
                            <b>Series group 2:</b>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <JqxCheckBox ref='btnEnableSeriesGroup1' value='Visible'
                                width={120} height={25} hasThreeStates={false} checked={true}
                            />
                        </td>
                        <td>
                            <JqxCheckBox ref='btnEnableSeriesGroup2' value='Visible'
                                width={120} height={25} hasThreeStates={false} checked={false}
                            />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <JqxCheckBox ref='btnStackedSeriesGroup1' value='Stacked'
                                width={120} height={25} hasThreeStates={false} checked={false}
                            />
                        </td>
                        <td>
                            <JqxCheckBox ref='btnStackedSeriesGroup2' value='Stacked'
                                width={120} height={25} hasThreeStates={false} checked={false}
                            />
                        </td>
                    </tr>
                    <tr>
                        <td>Space between columns / padding:
                            <JqxSlider ref='sliderColumnsGapPercentGroup1'
                                width={250} min={0} max={99} value={25}
                                ticksFrequency={5} step={1} mode={'fixed'}
                            />
                        </td>
                        <td>Space between columns / padding:
                            <JqxSlider ref='sliderColumnsGapPercentGroup2'
                                width={250} min={0} max={99} value={25}
                                ticksFrequency={5} step={1} mode={'fixed'}
                            />
                        </td>
                    </tr>
                    <tr>
                        <td>Space between series:
                            <JqxSlider ref='sliderSeriesGapGroup1'
                                width={250} min={0} max={100} value={10}
                                ticksFrequency={5} step={1} mode={'fixed'}
                            />
                        </td>
                        <td>Space between series:
                            <JqxSlider ref='sliderSeriesGapGroup2'
                                width={250} min={0} max={100} value={25}
                                ticksFrequency={5} step={1} mode={'fixed'}
                            />
                        </td>
                    </tr>
                    <tr>
                        <td>Minimum column width:
                            <JqxSlider ref='sliderMinWidthGroup1'
                                width={250} min={0} max={50} value={0}
                                ticksFrequency={5} step={1} mode={'fixed'}
                            />
                        </td>
                        <td>Minimum column width:
                            <JqxSlider ref='sliderMinWidthGroup2'
                                width={250} min={0} max={50} value={0}
                                ticksFrequency={5} step={1} mode={'fixed'}
                            />
                        </td>
                    </tr>
                    <tr>
                        <td>Maximum column width:
                            <JqxSlider ref='sliderMaxWidthGroup1'
                                width={250} min={1} max={120} value={40}
                                ticksFrequency={20} step={1} mode={'fixed'}
                            />
                        </td>
                        <td>Maximum column width:
                            <JqxSlider ref='sliderMaxWidthGroup2'
                                width={250} min={1} max={120} value={40}
                                ticksFrequency={20} step={1} mode={'fixed'}
                            />
                        </td>
                    </tr>
                </table>
            </div>
        )
    }
}

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