Vertical Chart in React Chart component

4 Apr 20235 minutes to read

Vertical

In EJ2 chart, you can draw a chart in vertical manner by changing orientation of the axis. All series types support this feature. You can use isTransposed property in chart to render a chart in vertical manner.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, SplineSeries } from '@syncfusion/ej2-react-charts';
import { splineData } from 'datasource.ts';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    const primaryyAxis = { minimum: -5, maximum: 35, interval: 5, title: 'Temperature in Celsius', labelFormat: '{value}C' };
    const marker;
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='CO2 - Intensity Analysis' isTransposed={true}>
                    <Inject services={[SplineSeries, Legend, Tooltip, DataLabel, Category]}/>
                    <SeriesCollectionDirective>
                        <SeriesDirective dataSource={splineData} xName='x' yName='y' width={2} name='London' type='Spline' marker={marker}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
                </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
         Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, SplineSeries,  Selection}
from'@syncfusion/ej2-react-charts';
import { splineData } from 'datasource.ts';

function App() {

    const primaryxAxis: AxisModel= { title: 'Month',valueType: 'Category'}  ;
    const primaryyAxis: AxisModel= {  minimum: -5, maximum: 35, interval: 5,title: 'Temperature in Celsius',labelFormat: '{value}C'}  ;
    const marker:{ visible: true, width: 10, height: 10 };


        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                title='CO2 - Intensity Analysis' isTransposed={ true }>
                    <Inject services={[SplineSeries, Legend, Tooltip, DataLabel,  Category]}/>
                    <SeriesCollectionDirective>
                        <SeriesDirective dataSource ={splineData}  xName='x' yName='y' width={2} name='London' type='Spline'
                        marker={ marker }>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
                </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

See Also