To render a polar series, use seriestype
as Polar
and
inject PolarSeries
into the provide
.
Polar drawType property is used to change the series plotting type to line, column, area, range column, spline,
scatter, stacking area and stacking column. The default value of drawType is Line
.
To render a line draw type, use series drawType
as Line
and inject
LineSeries
inject LineSeries
into the provide
.
isClosed
property specifies whether to join start and end point of
a line series used in polar chart to form a closed path. Default value of isClosed is true.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Polar' xName='x' yName='y' drawType='Line'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries} from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData:[
{ 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 }],
primaryXAxis: {
title: 'Year',
minimum: 2004, maximum: 2012, interval: 1
},
primaryYAxis: {
minimum: 20, maximum: 40, interval: 5,
title: 'Efficiency',
labelFormat: '{value}%'
},
title: "Efficiency of oil-fired power production"
};
},
provide: {
chart: [Tooltip, Legend, PolarSeries, Category, LineSeries, RadarSeries]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>
To render a spline line draw type, use series drawType
as Spline
and inject SplineSeries
inject SplineSeries
into the provide
.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Polar' xName='x' yName='y' drawType='Spline'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { Tooltip, Legend, PolarSeries, Category, SplineSeries, RadarSeries, ChartPlugin } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData:[
{ 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 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
minimum: -5, maximum: 35, interval: 10,
title: 'Temperature in Celsius',
labelFormat: '{value}C'
},
title: "Climate Graph-2012"
};
},
provide: {
chart: [Tooltip, Legend, PolarSeries, Category, SplineSeries, RadarSeries]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>
To render a area line draw type, use series drawType
as Area
and
inject AreaSeries
into the provide
.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Polar' xName='x' yName='y' drawType='Area'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, PolarSeries, Category, AreaSeries } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData:[
{ 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 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
minimum: -5, maximum: 35, interval: 10,
title: 'Temperature in Celsius',
labelFormat: '{value}C'
},
title: "Climate Graph-2012"
};
},
provide: {
chart: [PolarSeries, Category, AreaSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
To render a stacked area draw type, use series drawType
as StackingArea
and inject StackingAreaSeries
into the provide
.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Polar' xName='x' yName='y' drawType='StackingArea' name='Organic'></e-series>
<e-series :dataSource='seriesData' type='Polar' xName='x' yName='y1' drawType='StackingArea' name='Fair-trade'></e-series>
<e-series :dataSource='seriesData' type='Polar' xName='x' yName='y' drawType='StackingArea' name='veg-Alternatives'></e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, PolarSeries, Category, StackingAreaSeries } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData:[
{ 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 }
],
primaryXAxis: {
valueType: 'Category'
},
title: "Trend in Sales of Ethical Produce"
};
},
provide: {
chart: [PolarSeries, Category, StackingAreaSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
To render a column draw type, use series drawType
as Column
and inject ColumnSeries
into the provide
.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Polar' xName='country' yName='gold' drawType='Column' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, PolarSeries, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ 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 }
],
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, PolarSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
To render a stacked column draw type, use series drawType
as StackingColumn
and inject StackingColumnSeries
into the provide
.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Polar' xName='x' yName='y' drawType='StackingColumn' name='Organic'></e-series>
<e-series :dataSource='seriesData' type='Polar' xName='x' yName='y1' drawType='StackingColumn' name='Fair-trade'></e-series>
<e-series :dataSource='seriesData' type='Polar' xName='x' yName='y' drawType='StackingColumn' name='veg-Alternatives'></e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, PolarSeries, Category, StackingColumnSeries } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData:[
{ 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 }
],
primaryXAxis: {
valueType: 'Category'
},
title: "Trend in Sales of Ethical Produce"
};
},
provide: {
chart: [PolarSeries, Category, StackingColumnSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
To render a range column draw type, use series drawType
as RangeColumn
and inject RangeColumnSeries
into the provide
.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Polar' xName='x' high='high' low='low' drawType='RangeColumn' name='Gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, PolarSeries, RangeColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData: [
{ 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 }
],
primaryXAxis: {
valueType: 'Category',
title: 'Months'
},
title: "Maximum and Minimum Temperature"
};
},
provide: {
chart: [RangeColumnSeries, Category, PolarSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
To render a scatter draw type, use series drawType
as Scatter
and
inject ScatterSeries
into the provide
.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Polar' xName='x' yName='y' drawType='Scatter' name='London'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, PolarSeries, Category, ScatterSeries } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData:[
{ 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 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
minimum: -5, maximum: 35, interval: 10,
title: 'Temperature in Celsius',
labelFormat: '{value}C'
},
title: "Climate Graph-2012"
};
},
provide: {
chart: [PolarSeries, Category, ScatterSeries]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>
To render a radar series, use series type
as Radar
and
inject RadarSeries
into the provide
.
To render a line draw type, use series drawType
as Line
and inject
LineSeries
inject LineSeries
into the provide
.
isClosed
property specifies whether to join start and end point of a line series used in polar chart to form a closed path. Default value of isClosed is true.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Radar' xName='x' yName='y' drawType='Line'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, RadarSeries, LineSeries } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData:[
{ 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 }],
primaryXAxis: {
title: 'Year',
minimum: 2004, maximum: 2012, interval: 1
},
primaryYAxis: {
minimum: 20, maximum: 40, interval: 5,
title: 'Efficiency',
labelFormat: '{value}%'
},
title: "Efficiency of oil-fired power production"
};
},
provide: {
chart: [RadarSeries, LineSeries]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>
You can customize the start angle of the polar series using
startAngle
property. By default, startAngle
is 0 degree.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Radar' xName='x' yName='y' drawType='Line'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, RadarSeries, LineSeries } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData:[
{ 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 }],
primaryXAxis: {
title: 'Year',
minimum: 2004, maximum: 2012, interval: 1
},
primaryYAxis: {
minimum: 20, maximum: 40, interval: 5,
title: 'Efficiency',
labelFormat: '{value}%'
},
title: "Efficiency of oil-fired power production"
};
},
provide: {
chart: [RadarSeries, LineSeries]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>
You can customize the radius of the polar series and radar series using
coefficient
property. By default, coefficient
is 100.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Radar' xName='x' yName='y' drawType='Line'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import Vue from "vue";
import { ChartPlugin, RadarSeries, LineSeries } from "@syncfusion/ej2-vue-charts";
Vue.use(ChartPlugin);
export default {
data() {
return {
seriesData:[
{ 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 }],
primaryXAxis: {
title: 'Year',
minimum: 2004, maximum: 2012, interval: 1
},
primaryYAxis: {
minimum: 20, maximum: 40, interval: 5,
title: 'Efficiency',
labelFormat: '{value}%'
},
title: "Efficiency of oil-fired power production"
};
},
provide: {
chart: [RadarSeries, LineSeries]
},
};
</script>
<style>
#container {
height: 350px;
}
</style>