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 JavaScript stacked pyramid chart with horizontal orientation. In order to change the orientation you have to use the orientation setting. The labels are formatted with right horizontal alignment.
    </title>
    <meta name="description" content="This React Chart demo showcases how to use Chart Pyramid 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="../../../scripts/demos.js"></script>
</head>
<body>
    <div class="example-description" style="margin-bottom:3em">
        This is an example of JavaScript stacked pyramid chart with horizontal orientation. In order to change the orientation you have to use the orientation setting. The labels are formatted with right horizontal alignment.
    </div>
    <div id="app"></div>
    <script src="../build/chart_stackedpyramidchart.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 sampleData = [
            { Index: '1', SerieA: -30, SerieB: -10, SerieC: -25 },
            { Index: '2', SerieA: -25, SerieB: -25, SerieC: 10 },
            { Index: '3', SerieA: 30, SerieB: 0, SerieC: 25 },
            { Index: '4', SerieA: 35, SerieB: 25, SerieC: 45 },
            { Index: '5', SerieA: 0, SerieB: 20, SerieC: 25 }
        ];

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

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

        let xAxis =
            {
                flip: true,
                dataField: 'Index',
                tickMarks: {
                    visible: true,
                    interval: 1
                },
                gridLines: {
                    visible: true,
                    interval: 1
                }
            };

        let valueAxis =
            {
                flip: true,
                labels: { horizontalAlignment: 'right' }
            };

        let seriesGroups =
            [
                {
                    orientation: 'horizontal',
                    type: 'stackedcolumn',
                    columnsGapPercent: 50,
                    seriesGapPercent: 0,
                    columnsTopWidthPercent: 0,
                    columnsBottomWidthPercent: 100,
                    series: [
                        { dataField: 'SerieA', displayText: 'Serie A' },
                        { dataField: 'SerieB', displayText: 'Serie B' },
                        { dataField: 'SerieC', displayText: 'Serie C' }
                    ]
                }
            ];
        return (
            <JqxChart style={{ width: 850, height: 500 }}
                title={'Stacked Pyramid chart'} description={''}
                showLegend={true} enableAnimations={false} padding={padding}
                titlePadding={titlePadding} source={sampleData} xAxis={xAxis}
                valueAxis={valueAxis} colorScheme={'scheme06'} seriesGroups={seriesGroups}
            />
        )
    }
}

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