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"));