Polar Chart in React Chart

17 Aug 202624 minutes to read

Polar Chart

Follow these steps to render a polar series, which plots data points on a circular graph.

  1. Set the series type: Set the series type to Polar in the series configuration.

  2. Inject the PolarSeries module: Add PolarSeries to the services array of the Inject component inside ChartComponent. This registers the functionality required to render a polar series.

To get start quickly with React Polar and Radar Charts, you can check on this video:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month' };
    const primaryyAxis = { minimum: 20, maximum: 40, interval: 5, title: 'Efficiency', labelFormat: '{value}%' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Efficiency of oil-fired power production'>
      <Inject services={[PolarSeries, LineSeries]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Polar' name='Department' drawType='Line'>
        </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,
         PolarSeries, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month' };
  const primaryyAxis: AxisModel = { minimum: 20, maximum: 40, interval: 5, title: 'Efficiency', labelFormat: '{value}%' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Efficiency of oil-fired power production'>
      <Inject services={[PolarSeries, LineSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Polar' name='Department' drawType='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];
export let data: Object[] = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

Binding data with series

You can bind data to the chart using the dataSource property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series xName and yName properties.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month' };
    const primaryyAxis = { minimum: 20, maximum: 40, interval: 5, title: 'Efficiency', labelFormat: '{value}%' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Efficiency of oil-fired power production'>
      <Inject services={[PolarSeries, LineSeries]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Polar' name='Department' drawType='Line'>
        </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,
         PolarSeries, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month' };
  const primaryyAxis: AxisModel = { minimum: 20, maximum: 40, interval: 5, title: 'Efficiency', labelFormat: '{value}%' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Efficiency of oil-fired power production'>
      <Inject services={[PolarSeries, LineSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Polar' name='Department' drawType='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];
export let data: Object[] = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

Draw type

Use the drawType property to change the series plotting type in a polar chart to Line, Spline, Area, StackingArea, Column, StackingColumn, RangeColumn, Scatter, or SplineArea. The default value of drawType is Line. Each subsection below shows the drawType value to set and the additional module to inject alongside PolarSeries.

Line

Set the series drawType to Line and inject LineSeries alongside PolarSeries. The lines connect each data point around the polar axis.

The isClosed property specifies whether to join the start and end points of a line series used in a polar chart to form a closed path. The default value of isClosed is true.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month' };
    const primaryyAxis = { minimum: 20, maximum: 40, interval: 5, title: 'Efficiency', labelFormat: '{value}%' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Efficiency of oil-fired power production'>
      <Inject services={[PolarSeries, LineSeries]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Polar' name='Department' drawType='Line'>
        </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,
         PolarSeries, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month' };
  const primaryyAxis: AxisModel = { minimum: 20, maximum: 40, interval: 5, title: 'Efficiency', labelFormat: '{value}%' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Efficiency of oil-fired power production'>
      <Inject services={[PolarSeries, LineSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Polar' name='Department' drawType='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];
export let data: Object[] = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

Spline

Set the series drawType to Spline and inject SplineSeries alongside PolarSeries. Smooth, curved lines connect each data point. The isClosed property is also applicable to this type.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, Category, SplineSeries } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    const primaryyAxis = { minimum: -5, maximum: 35, interval: 10, title: 'Temperature in Celsius', labelFormat: '{value}C' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Climate Graph-2012'>
      <Inject services={[PolarSeries, SplineSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' type='Polar' name='London' drawType='Spline'>
        </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,
         PolarSeries, Category, SplineSeries}
from'@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

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

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Climate Graph-2012'>
      <Inject services={[PolarSeries, SplineSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' type='Polar' name='London' drawType='Spline'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

Area

Set the series drawType to Area and inject AreaSeries alongside PolarSeries. The area beneath the line is filled with color.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, AreaSeries } from '@syncfusion/ej2-react-charts';
import { areaData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Years', minimum: 1900, maximum: 2000, interval: 10 };
    const primaryyAxis = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
      <Inject services={[PolarSeries, AreaSeries]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' type='Polar' name='London' drawType='Area' fill='#69D2E7'>
        </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,
         PolarSeries, AreaSeries}
from'@syncfusion/ej2-react-charts';
import { areaData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Years', minimum: 1900, maximum: 2000, interval: 10 };
  const primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'>
      <Inject services={[PolarSeries, AreaSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' type='Polar' name='London' drawType='Area' fill='#69D2E7'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let areaData = [
    { x: 1900, y: 4 }, 
    { x: 1920, y: 3.0 }, 
    { x: 1940, y: 3.8 },
    { x: 1960, y: 3.4 }, 
    { x: 1980, y: 3.2 }, 
    { x: 2000, y: 3.9 }
];
export let areaData: Object[] = [
    { x: 1900, y: 4 }, 
    { x: 1920, y: 3.0 }, 
    { x: 1940, y: 3.8 },
    { x: 1960, y: 3.4 }, 
    { x: 1980, y: 3.2 }, 
    { x: 2000, y: 3.9 }
];

Stacked area

Set the series drawType to StackingArea and inject StackingAreaSeries alongside PolarSeries. Areas are stacked on top of each other to display the cumulative value of multiple series; add at least two series to see the stacking effect.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, StackingAreaSeries, Category } from '@syncfusion/ej2-react-charts';
import { StackedAreaData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Years', valueType: 'Category', majorGridLines: { width: 0 } };
    const primaryyAxis = { minimum: 0, maximum: 4, interval: 1, title: 'Spend Billions', majorTickLines: { width: 0 }, labelFormat: '{value}B' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Trend in Sales of Ethical Produce'>
      <Inject services={[PolarSeries, StackingAreaSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={StackedAreaData} xName='x' yName='y' type='Polar' name='Organic' drawType='StackingArea'></SeriesDirective>
        <SeriesDirective dataSource={StackedAreaData} xName='x' yName='y1' type='Polar' name='Fair -Trade' drawType='StackingArea'></SeriesDirective>
        <SeriesDirective dataSource={StackedAreaData} xName='x' yName='y2' type='Polar' name='Veg-Alternatives' drawType='StackingArea'></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,
         PolarSeries, StackingAreaSeries, Category}
from'@syncfusion/ej2-react-charts';
import { StackedAreaData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Years', valueType: 'Category', majorGridLines: { width: 0 } };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 4, interval: 1, title: 'Spend Billions', majorTickLines: { width: 0 }, labelFormat: '{value}B' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Trend in Sales of Ethical Produce'>
      <Inject services={[PolarSeries, StackingAreaSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={StackedAreaData} xName='x' yName='y' type='Polar' name='Organic' drawType='StackingArea'></SeriesDirective>
        <SeriesDirective dataSource={StackedAreaData} xName='x' yName='y1' type='Polar' name='Fair -Trade' drawType='StackingArea'></SeriesDirective>
        <SeriesDirective dataSource={StackedAreaData} xName='x' yName='y2' type='Polar' name='Veg-Alternatives' drawType='StackingArea'></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let StackedAreaData = [
    { x: '2000', y: 0.61, y1: 0.03, y2: 0.48},
    { x: '2001', y: 0.81, y1: 0.05, y2: 0.53 },
    { x: '2002', y: 0.91, y1: 0.06, y2: 0.57 },
    { x: '2003', y: 1,    y1: 0.09, y2: 0.61 },
    { x: '2004', y: 1.19, y1: 0.14, y2: 0.63 },
    { x: '2005', y: 1.47, y1: 0.20, y2: 0.64 },
    { x: '2006', y: 1.74, y1: 0.29, y2: 0.66 },
    { x: '2007', y: 1.98, y1: 0.46, y2: 0.76 },
    { x: '2008', y: 1.99, y1: 0.64, y2: 0.77 },
    { x: '2009', y: 1.70, y1: 0.75, y2: 0.55 }
];
export let StackedAreaData: Object[] = [
    { x: '2000', y: 0.61, y1: 0.03, y2: 0.48},
    { x: '2001', y: 0.81, y1: 0.05, y2: 0.53 },
    { x: '2002', y: 0.91, y1: 0.06, y2: 0.57 },
    { x: '2003', y: 1,    y1: 0.09, y2: 0.61 },
    { x: '2004', y: 1.19, y1: 0.14, y2: 0.63 },
    { x: '2005', y: 1.47, y1: 0.20, y2: 0.64 },
    { x: '2006', y: 1.74, y1: 0.29, y2: 0.66 },
    { x: '2007', y: 1.98, y1: 0.46, y2: 0.76 },
    { x: '2008', y: 1.99, y1: 0.64, y2: 0.77 },
    { x: '2009', y: 1.70, y1: 0.75, y2: 0.55 }
];

Column

Set the series drawType to Column and inject ColumnSeries alongside PolarSeries. Polar columns let you compare values across categories.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, Category, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Country', valueType: 'Category' };
    const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Gold medals'>
      <Inject services={[PolarSeries, ColumnSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Polar' name='Gold' drawType='Column'>
        </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,
         PolarSeries, Category, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Country', valueType: 'Category' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Olympic Gold medals'>
      <Inject services={[PolarSeries, ColumnSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Polar' name='Gold' drawType='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let columnData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];
export let columnData: Object[] = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];

Stacked column

Set the series drawType to StackingColumn and inject StackingColumnSeries alongside PolarSeries. Each column is composed of multiple segments stacked on top of each other; add at least two series to see the stacking effect.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, StackingColumnSeries, Category } from '@syncfusion/ej2-react-charts';
import { stackedColumnData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Years', valueType: 'Category' };
    const primaryyAxis = { minimum: 0, maximum: 700, interval: 100, title: 'Spend Billions', labelFormat: '{value}B' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Mobile Game marker by Country'>
      <Inject services={[PolarSeries, StackingColumnSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stackedColumnData} xName='x' yName='y' type='Polar' name='England' drawType='StackingColumn'></SeriesDirective>
        <SeriesDirective dataSource={stackedColumnData} xName='x' yName='y1' type='Polar' name='Germany' drawType='StackingColumn'></SeriesDirective>
        <SeriesDirective dataSource={stackedColumnData} xName='x' yName='y2' type='Polar' name='France' drawType='StackingColumn'></SeriesDirective>
        <SeriesDirective dataSource={stackedColumnData} xName='x' yName='y3' type='Polar' name='Italy' drawType='StackingColumn'></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,
         PolarSeries, StackingColumnSeries, Category}
from'@syncfusion/ej2-react-charts';
import { stackedColumnData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Years', valueType: 'Category' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 700, interval: 100, title: 'Spend Billions', labelFormat: '{value}B' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Mobile Game marker by Country'>
      <Inject services={[PolarSeries, StackingColumnSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stackedColumnData} xName='x' yName='y' type='Polar' name='England' drawType='StackingColumn'></SeriesDirective>
        <SeriesDirective dataSource={stackedColumnData} xName='x' yName='y1' type='Polar' name='Germany' drawType='StackingColumn'></SeriesDirective>
        <SeriesDirective dataSource={stackedColumnData} xName='x' yName='y2' type='Polar' name='France' drawType='StackingColumn'></SeriesDirective>
        <SeriesDirective dataSource={stackedColumnData} xName='x' yName='y3' type='Polar' name='Italy' drawType='StackingColumn'></SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stackedColumnData = [
    { x: '2014', y: 111.1, y1: 76.9,  y2: 66.1,  y3: 34.1 },
    { x: '2015', y: 127.3, y1: 99.5,  y2: 79.3,  y3: 38.2 },
    { x: '2016', y: 143.4, y1: 121.7, y2: 91.3,  y3: 44.0 },
    { x: '2017', y: 159.9, y1: 142.5, y2: 102.4, y3: 51.6 },
    { x: '2018', y: 175.4, y1: 166.7, y2: 112.9, y3: 61.9 },
    { x: '2019', y: 189.0, y1: 182.9, y2: 122.4, y3: 71.5 },
    { x: '2020', y: 202.7, y1: 197.3, y2: 120.9, y3: 82.0 }
];
export let stackedColumnData: Object[] = [
    { x: '2014', y: 111.1, y1: 76.9,  y2: 66.1,  y3: 34.1 },
    { x: '2015', y: 127.3, y1: 99.5,  y2: 79.3,  y3: 38.2 },
    { x: '2016', y: 143.4, y1: 121.7, y2: 91.3,  y3: 44.0 },
    { x: '2017', y: 159.9, y1: 142.5, y2: 102.4, y3: 51.6 },
    { x: '2018', y: 175.4, y1: 166.7, y2: 112.9, y3: 61.9 },
    { x: '2019', y: 189.0, y1: 182.9, y2: 122.4, y3: 71.5 },
    { x: '2020', y: 202.7, y1: 197.3, y2: 120.9, y3: 82.0 }
];

Range column

Set the series drawType to RangeColumn and inject RangeColumnSeries alongside PolarSeries. Each column spans a range of values, requiring high and low data fields.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, RangeColumnSeries, Category } from '@syncfusion/ej2-react-charts';
import { rangeColumnData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    const primaryyAxis = { title: 'Temperature' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Maximum and Minimum Temperature'>
      <Inject services={[PolarSeries, RangeColumnSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective type='Polar' dataSource={rangeColumnData} xName='x' high='high' low='low' drawType='RangeColumn'>
        </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,
         PolarSeries, RangeColumnSeries, Category}
from'@syncfusion/ej2-react-charts';
import { rangeColumnData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month', valueType: 'Category' };
  const primaryyAxis: AxisModel = { title: 'Temperature' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Maximum and Minimum Temperature'>
      <Inject services={[PolarSeries, RangeColumnSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective type='Polar' dataSource={rangeColumnData} xName='x' high='high' low='low' drawType='RangeColumn'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let rangeColumnData = [
    { x: 'Jan', low: 0.7,  high: 6.1 }, 
    { x: 'Feb', low: 1.3,  high: 6.3 }, 
    { x: 'Mar', low: 1.9,  high: 8.5 },
    { x: 'Apr', low: 3.1,  high: 10.8 }, 
    { x: 'May', low: 5.7,  high: 14.40 }, 
    { x: 'Jun', low: 8.4,  high: 16.90 },
    { x: 'Jul', low: 10.6, high: 19.20 }, 
    { x: 'Aug', low: 10.5, high: 18.9 }, 
    { x: 'Sep', low: 8.5,  high: 16.1 },
    { x: 'Oct', low: 6.0,  high: 12.5 }, 
    { x: 'Nov', low: 1.5,  high: 6.9  }, 
    { x: 'Dec', low: 5.1,  high: 12.1 }
];
export let rangeColumnData: Object[] = [
    { x: 'Jan', low: 0.7,  high: 6.1 }, 
    { x: 'Feb', low: 1.3,  high: 6.3 }, 
    { x: 'Mar', low: 1.9,  high: 8.5 },
    { x: 'Apr', low: 3.1,  high: 10.8 }, 
    { x: 'May', low: 5.7,  high: 14.40 }, 
    { x: 'Jun', low: 8.4,  high: 16.90 },
    { x: 'Jul', low: 10.6, high: 19.20 }, 
    { x: 'Aug', low: 10.5, high: 18.9 }, 
    { x: 'Sep', low: 8.5,  high: 16.1 },
    { x: 'Oct', low: 6.0,  high: 12.5 }, 
    { x: 'Nov', low: 1.5,  high: 6.9  }, 
    { x: 'Dec', low: 5.1,  high: 12.1 }
];

Scatter

Set the series drawType to Scatter and inject ScatterSeries alongside PolarSeries. Data points are rendered as markers without connecting lines.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, Category, ScatterSeries } from '@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category' };
    const primaryyAxis = {
        minimum: -5, maximum: 35, interval: 10, title: 'Temperature in Celsius',
        labelFormat: '{value}C'
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Climate Graph-2012'>
      <Inject services={[PolarSeries, ScatterSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='x' yName='y' type='Polar' name='London' drawType='Scatter'>
        </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,
         PolarSeries, Category, ScatterSeries}
from'@syncfusion/ej2-react-charts';
import { scatterData } from './datasource';

function App() {

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

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Climate Graph-2012'>
      <Inject services={[PolarSeries, ScatterSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={scatterData} xName='x' yName='y' type='Polar' name='London' drawType='Scatter'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let scatterData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let scatterData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

Spline area

Set the series drawType to SplineArea and inject SplineAreaSeries alongside PolarSeries. Smooth, curved lines connect each data point and the area beneath the line is filled with color.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, SplineAreaSeries } from '@syncfusion/ej2-react-charts';
import { areaData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Years', minimum: 1900, maximum: 2000, interval: 10 };
    const primaryyAxis = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Average Sales Comparison'>
      <Inject services={[PolarSeries, SplineAreaSeries]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' type='Polar' name='London' drawType='SplineArea' fill='#69D2E7'>
        </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,
         PolarSeries, SplineAreaSeries}
from'@syncfusion/ej2-react-charts';
import { areaData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Years', minimum: 1900, maximum: 2000, interval: 10 };
  const primaryyAxis: AxisModel = { minimum: 2, maximum: 5, interval: 0.5, title: 'Sales Amount in Millions' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Average Sales Comparison'>
      <Inject services={[PolarSeries, SplineAreaSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={areaData} xName='x' yName='y' type='Polar' name='London' drawType='SplineArea' fill='#69D2E7'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let areaData = [
    { x: 1900, y: 4 }, 
    { x: 1920, y: 3.0 }, 
    { x: 1940, y: 3.8 },
    { x: 1960, y: 3.4 }, 
    { x: 1980, y: 3.2 }, 
    { x: 2000, y: 3.9 }
];
export let areaData: Object[] = [
    { x: 1900, y: 4 }, 
    { x: 1920, y: 3.0 }, 
    { x: 1940, y: 3.8 },
    { x: 1960, y: 3.4 }, 
    { x: 1980, y: 3.2 }, 
    { x: 2000, y: 3.9 }
];

Series customization

Customize the polar chart’s geometry with the following properties on the chart’s primary X axis.

Start angle

Configure the startAngle on the chart’s primary X axis to rotate the polar plot. By default, startAngle is 0 degrees.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, Category, SplineSeries } from '@syncfusion/ej2-react-charts';
import { splineData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', valueType: 'Category',  startAngle: 90 };
    const primaryyAxis = { minimum: -5, maximum: 35, interval: 10, title: 'Temperature in Celsius', labelFormat: '{value}C' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Climate Graph-2012'>
      <Inject services={[PolarSeries, SplineSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' type='Polar' name='London' drawType='Spline'>
        </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,
         PolarSeries, Category, SplineSeries}
from'@syncfusion/ej2-react-charts';
import { splineData } from './datasource';

function App() {

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

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Climate Graph-2012'>
      <Inject services={[PolarSeries, SplineSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={splineData} xName='x' yName='y' type='Polar' name='London' drawType='Spline'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let splineData = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];
export let splineData: Object[] = [
    { x: 'Jan', y: -1 }, 
    { x: 'Feb', y: -1 }, 
    { x: 'Mar', y: 2 },
    { x: 'Apr', y: 8 }, 
    { x: 'May', y: 13 }, 
    { x: 'Jun', y: 18 },
    { x: 'Jul', y: 21 }, 
    { x: 'Aug', y: 20 }, 
    { x: 'Sep', y: 16 },
    { x: 'Oct', y: 10 }, 
    { x: 'Nov', y: 4 }, 
    { x: 'Dec', y: 0 }
];

Radius

Configure the coefficient on the chart’s primary X axis to scale the polar radius. The value ranges from 0 to 100, where 100 fills the available chart area.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    const primaryxAxis = { title: 'Month', coefficient: 50 };
    const primaryyAxis = { minimum: 20, maximum: 40, interval: 5, title: 'Efficiency', labelFormat: '{value}%' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Efficiency of oil-fired power production'>
      <Inject services={[PolarSeries, LineSeries]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Polar' name='Department' drawType='Line'>
        </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,
         PolarSeries, LineSeries}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Month', coefficient: 50 };
  const primaryyAxis: AxisModel = { minimum: 20, maximum: 40, interval: 5, title: 'Efficiency', labelFormat: '{value}%' };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Efficiency of oil-fired power production'>
      <Inject services={[PolarSeries, LineSeries]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='x' yName='y' type='Polar' name='Department' drawType='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let data = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];
export let data: Object[] = [
    { x: 2005, y: 28 }, 
    { x: 2006, y: 25 },
    { x: 2007, y: 26 }, 
    { x: 2008, y: 27 },
    { x: 2009, y: 32 }, 
    { x: 2010, y: 35 }, 
    { x: 2011, y: 30 }
];

Empty points

Data points with null or undefined values are considered empty. By default (mode: 'Gap'), empty points leave a gap in the series; the mode property lets you change how they are handled.

Mode

Use the mode property to control handling of empty points. Available modes: Gap, Drop, Zero, Average. The default mode is Gap.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, Category, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {
  const primaryxAxis = { title: 'Country', valueType: 'Category' };
    const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
    const emptyPoint = { mode: 'Gap' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Gold medals'>
      <Inject services={[PolarSeries, ColumnSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Polar' name='Gold' drawType='Column' emptyPointSettings={emptyPoint}>
        </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,
         PolarSeries, Category, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Country', valueType: 'Category' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
  const emptyPoint: object = { mode: 'Gap' };
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Olympic Gold medals'>
      <Inject services={[PolarSeries, ColumnSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Polar' name='Gold' drawType='Column' emptyPointSettings={emptyPoint}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let columnData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: null },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];
export let columnData: Object[] = [
    { country: "USA",       gold: 50 },
  { country: "China",     gold: 40 },
  { country: "Japan",     gold: 70 },
  { country: "Australia", gold: 60 },
  { country: "France",    gold: null },
  { country: "Germany",   gold: 40 },
  { country: "Italy",     gold: 40 },
  { country: "Sweden",    gold: 30 }
];

Fill

Use the fill property to set the fill color for empty points.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, Category, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {
  const primaryxAxis = { title: 'Country', valueType: 'Category' };
    const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
    const emptyPoint = { mode: 'Average', fill: 'red' };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Gold medals'>
      <Inject services={[PolarSeries, ColumnSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Polar' name='Gold' drawType='Column' emptyPointSettings={emptyPoint}>
        </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,
         PolarSeries, Category, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Country', valueType: 'Category' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
  const emptyPoint: object = { mode: 'Average', fill: 'red' };
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Olympic Gold medals'>
      <Inject services={[PolarSeries, ColumnSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Polar' name='Gold' drawType='Column' emptyPointSettings={emptyPoint}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let columnData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: null },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];
export let columnData: Object[] = [
    { country: "USA",       gold: 50 },
  { country: "China",     gold: 40 },
  { country: "Japan",     gold: 70 },
  { country: "Australia", gold: 60 },
  { country: "France",    gold: null },
  { country: "Germany",   gold: 40 },
  { country: "Italy",     gold: 40 },
  { country: "Sweden",    gold: 30 }
];

Border

Use the border property to customize the border width and color for empty points.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, Category, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {
  const primaryxAxis = { title: 'Country', valueType: 'Category' };
    const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
    const emptyPoint = { mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'} };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Gold medals'>
      <Inject services={[PolarSeries, ColumnSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Polar' name='Gold' drawType='Column' emptyPointSettings={emptyPoint}>
        </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,
         PolarSeries, Category, ColumnSeries}
from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Country', valueType: 'Category' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
  const emptyPoint: object = { mode: 'Average', fill: 'red', border: {width: 1.5, color: 'green'} };
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Olympic Gold medals'>
      <Inject services={[PolarSeries, ColumnSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Polar' name='Gold' drawType='Column' emptyPointSettings={emptyPoint}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let columnData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: null },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];
export let columnData: Object[] = [
    { country: "USA",       gold: 50 },
  { country: "China",     gold: 40 },
  { country: "Japan",     gold: 70 },
  { country: "Australia", gold: 60 },
  { country: "France",    gold: null },
  { country: "Germany",   gold: 40 },
  { country: "Italy",     gold: 40 },
  { country: "Sweden",    gold: 30 }
];

Events

Series render

The seriesRender event fires before each series is rendered and lets you modify series properties such as data, fill, or name. For a polar series, use it to change a polygon color or swap data sources on the fly.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, Category, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {
  const primaryxAxis = { title: 'Country', valueType: 'Category' };
    const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
    const seriesRender = (args) => {
      args.fill = '#ff6347';
    }
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Gold medals' seriesRender={seriesRender}>
      <Inject services={[PolarSeries, ColumnSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Polar' name='Gold' drawType='Column'>
        </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,
         PolarSeries, Category, ColumnSeries, ISeriesRenderEventArgs}
from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Country', valueType: 'Category' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
  const seriesRender = (args: ISeriesRenderEventArgs) => {
    args.fill = '#ff6347';
  }
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Olympic Gold medals' seriesRender={seriesRender}>
      <Inject services={[PolarSeries, ColumnSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Polar' name='Gold' drawType='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let columnData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 35 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];
export let columnData: Object[] = [
    { country: "USA",       gold: 50 },
  { country: "China",     gold: 40 },
  { country: "Japan",     gold: 70 },
  { country: "Australia", gold: 60 },
  { country: "France",    gold: 35 },
  { country: "Germany",   gold: 40 },
  { country: "Italy",     gold: 40 },
  { country: "Sweden",    gold: 30 }
];

Point render

The pointRender event fires before each data point is drawn, letting you customize per-point marker shape, border, or fill. For a polar series, use it to apply conditional formatting to each vertex of the polygon.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, PolarSeries, Category, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {
  const primaryxAxis = { title: 'Country', valueType: 'Category' };
    const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
    const pointRender = (args) => {
      if (args.point.index % 2 !== 0) {
        args.fill = '#ff6347';
    }
    else {
        args.fill = '#009cb8';
    }
    }
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Gold medals' pointRender={pointRender}>
      <Inject services={[PolarSeries, ColumnSeries, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Polar' name='Gold' drawType='Column'>
        </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,
         PolarSeries, Category, ColumnSeries, ISeriesRenderEventArgs}
from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Country', valueType: 'Category' };
  const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
  const pointRender = (args: ISeriesRenderEventArgs) => {
    if (args.point.index % 2 !== 0) {
      args.fill = '#ff6347';
  }
  else {
      args.fill = '#009cb8';
  }
  }
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Olympic Gold medals' pointRender={pointRender}>
      <Inject services={[PolarSeries, ColumnSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Polar' name='Gold' drawType='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let columnData = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 35 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];
export let columnData: Object[] = [
    { country: "USA",       gold: 50 },
  { country: "China",     gold: 40 },
  { country: "Japan",     gold: 70 },
  { country: "Australia", gold: 60 },
  { country: "France",    gold: 35 },
  { country: "Germany",   gold: 40 },
  { country: "Italy",     gold: 40 },
  { country: "Sweden",    gold: 30 }
];

See also