Continuous Data

In this example, the Polar Chart control visualizes a curve that has the shape of a petalled flower. This curve is commonly known as "rose" or "rhodonea", and a line series type visualizes it.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/rose.json" TitleSettings-Text="Rose in Polar Coordinates">
    <SeriesCollection>
        <dx:BootstrapPolarChartLineSeries />
    </SeriesCollection>
    <ArgumentAxis Inverted="true" StartAngle="90" TickInterval="30" />
    <SettingsLegend Visible="false" />
</dx:BootstrapPolarChart>

Discrete Data

This example demonstrates how to visualize discrete data using the Polar Chart control. Months in the data source form discrete categories that divide the PolarChart.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/temperature.json" TitleSettings-Text="Average temperature in London" Height="500px">
    <SeriesCollection>
        <dx:BootstrapPolarChartScatterSeries ValueField="day" Name="Day" />
        <dx:BootstrapPolarChartScatterSeries ValueField="night" Name="Night" />
    </SeriesCollection>
    <SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
</dx:BootstrapPolarChart>

Spider Web

This example displays the Spider Web mode of the Polar Chart control. In this mode, chart sectors are straight rather than circular. This mode is enabled using the UseSpiderWeb option.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/spider.json" UseSpiderWeb="true" TitleSettings-Text="Fruit Production in 2010 (Millions of Tons)">
    <SeriesCollection>
        <dx:BootstrapPolarChartLineSeries ValueField="apples" Name="Apples" />
        <dx:BootstrapPolarChartLineSeries ValueField="grapes" Name="Grapes" />
        <dx:BootstrapPolarChartLineSeries ValueField="lemons" Name="Lemons" />
        <dx:BootstrapPolarChartLineSeries ValueField="oranges" Name="Oranges" />
    </SeriesCollection>
</dx:BootstrapPolarChart>

Wind Rose

This example illustrates a Wind Rose using the Polar Chart control with the StackedBar series type.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/wind.json" TitleSettings-Text="Wind Rose, Philadelphia PA">
    <SeriesCollection>
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val1" Name="1.3-4 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val2" Name="4-8 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val3" Name="8-13 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val4" Name="13-19 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val5" Name="19-25 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val6" Name="25-32 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val7" Name="32-39 m/s" />
        <dx:BootstrapPolarChartStackedBarSeries ValueField="val8" Name="39-47 m/s" />
    </SeriesCollection>
</dx:BootstrapPolarChart>

Periodic Data

This example illustrates the visualization of periodic data. The Period option of the argument axis is specified to notify the chart that data is periodic.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/pereodic.json" TitleSettings-Text="Archimedean Spiral">
    <SeriesCollection>
        <dx:BootstrapPolarChartLineSeries ValueField="val" Closed="false" />
    </SeriesCollection>
    <ArgumentAxis Inverted="true" StartAngle="90" TickInterval="45" Period="360" />
    <SettingsLegend Visible="false" />
</dx:BootstrapPolarChart>

Inverted Chart

This example shows the Polar Chart with inverted axes.

Unsupported Web Browser

To explore the capabilities of the DevExpress product line, please reload this webpage with a different web browser.

<dx:BootstrapPolarChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/inverted.json" TitleSettings-Text="Inverted Rose in Polar Coordinates">
    <SeriesCollection>
        <dx:BootstrapPolarChartSeries Type="Area" Closed="false" />
    </SeriesCollection>
    <ArgumentAxis Inverted="true" StartAngle="90" TickInterval="30" />
    <ValueAxis Inverted="true" />
    <SettingsLegend Visible="false" />
</dx:BootstrapPolarChart>
Screen Size
Color Themes
Demo QR Code