Choose an item

Radial Bar

Radial Bar charts use circular shapes to compare different categories, similar to a typical Bar chart but displayed on a polar coordinate system, instead of a cartesian system. The columns are in a circular shape because the xAxis is vertical and the yAxis is circular, as opposed to typical Bar charts. Radial Charts fix a unique radius for each bar representing each data plot. A Radial bar is best fitted to compare among categories by using circularly shaped bars.

This chart type belongs to the FusionWidgets XT.

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [ { "_itemHeader": "Radial Bar", "imgSrc": "radial-bar-chart-anatomy.png", "annotations": [{ "annotationNumber": "1", "annotationName": "Caption", "annotationDesc": "The caption (also called the chart title) is the heading of the chart. Unlike other gauges, the caption for the Radial Bar chart is customizable and can be placed either at the top (default) or bottom of the chart.", "annotationDescLinkPath": null, "leftPosition": "33.5%", "topPosition": "15.5%", "annotationLinks": [{ "linkDesc": "Learn how to add caption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "You can customize font properties and cosmetics of caption using attributes. Know more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" }, { "linkDesc": "You can also customize the alignment of the caption. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment" } ] }, { "annotationNumber": "2", "annotationName": "Subcaption", "annotationDesc": "A sub-caption is the text that appears just below the caption. It is part of the caption component and is customizable.", "annotationDescLinkPath": null, "leftPosition": "57%", "topPosition": "22%", "annotationLinks": [{ "linkDesc": "Learn how to add sub-caption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" } ] }, { "annotationNumber": "3", "annotationName": "Legend", "annotationDesc": "A legend is a chart element used to display the series name for each data-set. Legends are used to correlate a data plot to its series name using its color. ", "annotationDescLinkPath": null, "leftPosition": "75%", "topPosition": "30%", "annotationLinks": [{ "linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll, etc. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size" }, { "linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill" } ] }, { "annotationNumber": "4", "annotationName": "Track", "annotationDesc": "A track is the remaining part of Bar after representation of data plot/progress. ", "annotationDescLinkPath": null, "leftPosition": "29%", "topPosition": "57%", "annotationLinks": [] }, { "annotationNumber": "5", "annotationName": "Data Labels", "annotationDesc": "Radial charts have labels that can be placed at the start of the bar or inside them. Icons can also be used to represent labels and users can choose just to show labels, just the icons or both together. ", "annotationDescLinkPath":"/chart-guide/chart-configurations/data-labels", "leftPosition": "68%", "topPosition": "54%", "annotationLinks": [] }, { "annotationNumber": "6", "annotationName": "Context Label", "annotationDesc": "The context label (or center label) is the text that appears in the center of the chart and is used to show additional contextual information for the data plot. ", "annotationDescLinkPath": null, "leftPosition": "38%", "topPosition": "33%", "annotationLinks": [] }, { "annotationNumber": "7", "annotationName": "Tick Mark", "annotationDesc": "A polar scale in the Radial Bar chart with ticks and their respective values. Learn more about them ", "annotationDescLinkPath": "/chart-guide/chart-configurations/tick-marks", "leftPosition": "62.5%", "topPosition": "40%", "annotationLinks": [] }, { "annotationNumber": "8", "annotationName": "Data Plot", "annotationDesc": "Data plot refers to the bars of the dial.", "annotationDescLinkPath": null, "leftPosition": "33%", "topPosition": "45%", "annotationLinks": [{ "linkDesc": "You can customize the data plots, learn more about it . ", "linkPath": "/chart-guide/chart-configurations/data-plot" }] }, { "annotationNumber": "9", "annotationName": "Tooltip", "annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It is used to show additional information along with data plot names and values. ", "annotationDescLinkPath": "null", "leftPosition": "66%", "topPosition": "62.5%", "annotationLinks": [{ "linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips" }, { "linkDesc": "You can also customize the text of tooltip and use values plotted on the gauge using macros, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros" } ] } ] } ] } }

To create a radial bar chart follow the steps below:

  • In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format.
  • Specify the chart type using the type attribute. To render a radial bar chart, set to radialBar.
  • Set the container object using the renderAt attribute.
  • Specify the dimension of the chart using the width and height attributes.
  • Set the type of data (JSON/XML) you want to pass to the chart object using the dataFormat attribute.

For a detailed list of attributes, refer to the attributes page of chord diagram.

A Radial Bar chart looks as shown below:

FusionCharts will load here..
{
    "chart": {
        "caption": "Top 5 Android OS Market Share",
        "subCaption": "January 2021",
        "showLegend": "1",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Nougat 7.0",
            "value": "4.09"
        },
        {
            "label": "Oreo 8.0",
            "value": "5.19"
        },
        {
            "label": "Marshmallow 6.0",
            "value": "5.77"
        },
        {
            "label": "Oreo 8.1",
            "value": "9.89"
        },
        {
            "label": "Pie 9.0",
            "value": "21.53"
        }
    ]
}
<chart caption="Top 5 Android OS Market Share" subcaption="January 2021" showlegend="1" theme="fusion">
    <set label="Nougat 7.0" value="4.09" />
    <set label="Oreo 8.0" value="5.19" />
    <set label="Marshmallow 6.0" value="5.77" />
    <set label="Oreo 8.1" value="9.89" />
    <set label="Pie 9.0" value="21.53" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
        type: 'radialbar',
        renderAt: 'chart-container',
        width: '400',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Top 5 Android OS Market Share",
                "subCaption": "January 2021",
                "showLegend": "1",
                "theme": "fusion"
            },
            "data": [
                { "label": "Nougat 7.0", "value": "4.09" },
                { "label": "Oreo 8.0", "value": "5.19" },
                { "label": "Marshmallow 6.0", "value": "5.77" },
                { "label": "Oreo 8.1", "value": "9.89" },
                { "label": "Pie 9.0", "value": "21.53" }
            ]
        }
    }
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above chart.

The radial bar chart visually represents proportional data in a circular format, allowing to compare multiple categories at a glance. Each bar extends outward from the starting point to indicate the relative value of each item.

Customizations of a Radial Bar Chart

Customize Track and Bar

Configure Outer and Inner Radius

Based on the data values provided, the inner and outer radii are automatically calculated for the color range scale. The default value for inner and outer radius is 55px and 77px, respectively.

You can set the radius using the following attributes:

  • Specify the outer radius (in percentage or pixels values) using the outerRadius attribute.
  • Specify the inner radius (in percentage or pixels values) using the innerRadius attribute.

Refer to code below:

{
  "chart": {
    "innerRadius": "20px", // can also be specified in %
    "outerRadius": "80px" // can also be specified in %
  }
}

The chart will look as shown below:

FusionCharts will load here..
{
    "chart": {
        "caption": "Top 5 Android OS Market Share",
        "subCaption": "January 2021",
        "showLegend": "1",
        "innerRadius": "20px",
        "outerRadius": "80px",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Nougat 7.0",
            "value": "4.09"
        },
        {
            "label": "Oreo 8.0",
            "value": "5.19"
        },
        {
            "label": "Marshmallow 6.0",
            "value": "5.77"
        },
        {
            "label": "Oreo 8.1",
            "value": "9.89"
        },
        {
            "label": "Pie 9.0",
            "value": "21.53"
        }
    ]
}
<chart caption="Top 5 Android OS Market Share" subcaption="January 2021" showlegend="1" innerradius="20px" outerradius="80px" theme="fusion">
    <set label="Nougat 7.0" value="4.09" />
    <set label="Oreo 8.0" value="5.19" />
    <set label="Marshmallow 6.0" value="5.77" />
    <set label="Oreo 8.1" value="9.89" />
    <set label="Pie 9.0" value="21.53" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
        type: 'radialbar',
        renderAt: 'chart-container',
        width: '400',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Top 5 Android OS Market Share",
                "subCaption": "January 2021",
                "showLegend": "1",
                "innerRadius": "20px",
                "outerRadius": "80px",
                "theme": "fusion"
            },
            "data": [
                { "label": "Nougat 7.0", "value": "4.09" },
                { "label": "Oreo 8.0", "value": "5.19" },
                { "label": "Marshmallow 6.0", "value": "5.77" },
                { "label": "Oreo 8.1", "value": "9.89" },
                { "label": "Pie 9.0", "value": "21.53" }
            ]
        }
    }
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above chart.

Customize start and end angles

You can set the start and end angles, to specify from where in the circular layout the radial bars should begin and where should they end. To do so, set the value of the startAngle and the endAngle attribute to the desired angle.

Use the code given below:

{
  "chart": {
    "startAngle": "0",
    "endAngle": "270"
  }
}

The chart will look as shown below:

FusionCharts will load here..
{
    "chart": {
        "caption": "Top 5 Android OS Market Share",
        "subCaption": "January 2021",
        "showLegend": "1",
        "innerRadius": "20px",
        "outerRadius": "80px",
        "startAngle": "0",
        "endAngle": "270",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Nougat 7.0",
            "value": "4.09"
        },
        {
            "label": "Oreo 8.0",
            "value": "5.19"
        },
        {
            "label": "Marshmallow 6.0",
            "value": "5.77"
        },
        {
            "label": "Oreo 8.1",
            "value": "9.89"
        },
        {
            "label": "Pie 9.0",
            "value": "21.53"
        }
    ]
}
<chart caption="Top 5 Android OS Market Share" subcaption="January 2021" showlegend="1" innerradius="20px" outerradius="80px" startangle="0" endangle="270" theme="fusion">
    <set label="Nougat 7.0" value="4.09" />
    <set label="Oreo 8.0" value="5.19" />
    <set label="Marshmallow 6.0" value="5.77" />
    <set label="Oreo 8.1" value="9.89" />
    <set label="Pie 9.0" value="21.53" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
        type: 'radialbar',
        renderAt: 'chart-container',
        width: '400',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Top 5 Android OS Market Share",
                "subCaption": "January 2021",
                "showLegend": "1",
                "innerRadius": "20px",
                "outerRadius": "80px",
                "startAngle": "0",
                "endAngle": "270",
                "theme": "fusion"
            },
            "data": [
                { "label": "Nougat 7.0", "value": "4.09" },
                { "label": "Oreo 8.0", "value": "5.19" },
                { "label": "Marshmallow 6.0", "value": "5.77" },
                { "label": "Oreo 8.1", "value": "9.89" },
                { "label": "Pie 9.0", "value": "21.53" }
            ]
        }
    }
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above chart.

Customize margin and padding

You can introduce white space between a bar and its track to make the chart look cleaner. To do so, set the value of the trackPadding attribute to the desired amount.

Use the code given below:

{
  "chart": {
    "trackMargin": "20px",
    "trackPadding": "2px"
  }
}

The chart will look as shown below:

FusionCharts will load here..
{
    "chart": {
        "caption": "Top 5 Android OS Market Share",
        "subCaption": "January 2021",
        "showLegend": "1",
        "innerRadius": "20px",
        "outerRadius": "80px",
        "startAngle": "0",
        "endAngle": "270",
        "trackMargin": "20px",
        "trackPadding": "2px",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Nougat 7.0",
            "value": "4.09"
        },
        {
            "label": "Oreo 8.0",
            "value": "5.19"
        },
        {
            "label": "Marshmallow 6.0",
            "value": "5.77"
        },
        {
            "label": "Oreo 8.1",
            "value": "9.89"
        },
        {
            "label": "Pie 9.0",
            "value": "21.53"
        }
    ]
}
<chart caption="Top 5 Android OS Market Share" subcaption="January 2021" showlegend="1" innerradius="20px" outerradius="80px" startangle="0" endangle="270" trackmargin="20px" trackpadding="2px" theme="fusion">
    <set label="Nougat 7.0" value="4.09" />
    <set label="Oreo 8.0" value="5.19" />
    <set label="Marshmallow 6.0" value="5.77" />
    <set label="Oreo 8.1" value="9.89" />
    <set label="Pie 9.0" value="21.53" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
        type: 'radialbar',
        renderAt: 'chart-container',
        width: '400',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Top 5 Android OS Market Share",
                "subCaption": "January 2021",
                "showLegend": "1",
                "innerRadius": "20px",
                "outerRadius": "80px",
                "startAngle": "0",
                "endAngle": "270",
                "trackMargin": "20px",
                "trackPadding": "2px",
                "theme": "fusion"
            },
            "data": [
                { "label": "Nougat 7.0", "value": "4.09" },
                { "label": "Oreo 8.0", "value": "5.19" },
                { "label": "Marshmallow 6.0", "value": "5.77" },
                { "label": "Oreo 8.1", "value": "9.89" },
                { "label": "Pie 9.0", "value": "21.53" }
            ]
        }
    }
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above chart.

Customize Label & Values

Hide labels and values

In Radial Bar charts labels are disabled by default, you can choose to show labels using the showLabels attribute and set it's value to 1.

Use the code given below:

{
  "type": 'radialbar',
  "chart": {
    "showLabels": "1"
  }
}

The chart will look as shown below:

FusionCharts will load here..
{
    "chart": {
        "caption": "Top 5 Android OS Market Share",
        "subCaption": "January 2021",
        "showLegend": "1",
        "showLabels": "1",
        "innerRadius": "20px",
        "outerRadius": "80px",
        "startAngle": "0",
        "endAngle": "270",
        "trackMargin": "20px",
        "trackPadding": "2px",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Nougat 7.0",
            "value": "4.09"
        },
        {
            "label": "Oreo 8.0",
            "value": "5.19"
        },
        {
            "label": "Marshmallow 6.0",
            "value": "5.77"
        },
        {
            "label": "Oreo 8.1",
            "value": "9.89"
        },
        {
            "label": "Pie 9.0",
            "value": "21.53"
        }
    ]
}
<chart caption="Top 5 Android OS Market Share" subcaption="January 2021" showlegend="1" showlabels="1" innerradius="20px" outerradius="80px" startangle="0" endangle="270" trackmargin="20px" trackpadding="2px" theme="fusion">
    <set label="Nougat 7.0" value="4.09" />
    <set label="Oreo 8.0" value="5.19" />
    <set label="Marshmallow 6.0" value="5.77" />
    <set label="Oreo 8.1" value="9.89" />
    <set label="Pie 9.0" value="21.53" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
        type: 'radialbar',
        renderAt: 'chart-container',
        width: '400',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Top 5 Android OS Market Share",
                "subCaption": "January 2021",
                "showLegend": "1",
                "showLabels": "1",
                "innerRadius": "20px",
                "outerRadius": "80px",
                "startAngle": "0",
                "endAngle": "270",
                "trackMargin": "20px",
                "trackPadding": "2px",
                "theme": "fusion"
            },
            "data": [
                { "label": "Nougat 7.0", "value": "4.09" },
                { "label": "Oreo 8.0", "value": "5.19" },
                { "label": "Marshmallow 6.0", "value": "5.77" },
                { "label": "Oreo 8.1", "value": "9.89" },
                { "label": "Pie 9.0", "value": "21.53" }
            ]
        }
    }
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above chart.

Add Label icons

You can choose to display icons in your Radial Bar charts. To do so, use the showLabelIcon attribute and set it's value to 1. To choose the size of the icons, set the value of the iconScale attribute to the desired amount. To choose the position of the icons, set the value of the iconPosition attribute and set the value to start or end.

Use the code given below:

{
  "type": 'radialbar',
  "chart": {
    "showLabels": "1",
    "placeValuesInside": "1",
    "labelPosition": 'start',
    data: [{
      "label": "Nougat 7.0",
      "value": "4.09",
      "icon": 'https://cdn.example.com/images/alien.svg'
    },
    {
      // More data
    }]
  }
}

The chart will look as shown below:

FusionCharts will load here..
{
    "chart": {
        "caption": "Top 5 Android OS Market Share",
        "subCaption": "January 2021",
        "showLegend": "1",
        "showLabels": "1",
        "placeValuesInside": "1",
        "labelPosition": "start",
        "innerRadius": "20px",
        "outerRadius": "80px",
        "startAngle": "0",
        "endAngle": "360",
        "trackMargin": "20px",
        "trackPadding": "2px",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Nougat 7.0",
            "value": "4.09",
            "icon": "https://cdn.example.com/images/alien.svg"
        },
        {
            "label": "Oreo 8.0",
            "value": "5.19",
            "icon": "https://cdn.example.com/images/alien.svg"
        },
        {
            "label": "Marshmallow 6.0",
            "value": "5.77",
            "icon": "https://cdn.example.com/images/alien.svg"
        },
        {
            "label": "Oreo 8.1",
            "value": "9.89",
            "icon": "https://cdn.example.com/images/alien.svg"
        },
        {
            "label": "Pie 9.0",
            "value": "21.53",
            "icon": "https://cdn.example.com/images/alien.svg"
        }
    ]
}
<chart caption="Top 5 Android OS Market Share" subcaption="January 2021" showlegend="1" showlabels="1" placevaluesinside="1" labelposition="start" innerradius="20px" outerradius="80px" startangle="0" endangle="360" trackmargin="20px" trackpadding="2px" theme="fusion">
    <set label="Nougat 7.0" value="4.09" icon="https://cdn.example.com/images/alien.svg" />
    <set label="Oreo 8.0" value="5.19" icon="https://cdn.example.com/images/alien.svg" />
    <set label="Marshmallow 6.0" value="5.77" icon="https://cdn.example.com/images/alien.svg" />
    <set label="Oreo 8.1" value="9.89" icon="https://cdn.example.com/images/alien.svg" />
    <set label="Pie 9.0" value="21.53" icon="https://cdn.example.com/images/alien.svg" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
        type: 'radialbar',
        renderAt: 'chart-container',
        width: '400',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Top 5 Android OS Market Share",
                "subCaption": "January 2021",
                "showLegend": "1",
                "showLabels": "1",
                "placeValuesInside": "1",
                "labelPosition": 'start',
                "innerRadius": "20px",
                "outerRadius": "80px",
                "startAngle": "0",
                "endAngle": "360",
                "trackMargin": "20px",
                "trackPadding": "2px",
                "theme": "fusion"
            },
            "data": [
                { "label": "Nougat 7.0", "value": "4.09", "icon": 'https://cdn.example.com/images/alien.svg' },
                { "label": "Oreo 8.0", "value": "5.19", "icon": 'https://cdn.example.com/images/alien.svg' },
                { "label": "Marshmallow 6.0", "value": "5.77", "icon": 'https://cdn.example.com/images/alien.svg' },
                { "label": "Oreo 8.1", "value": "9.89", "icon": 'https://cdn.example.com/images/alien.svg' },
                { "label": "Pie 9.0", "value": "21.53", "icon": 'https://cdn.example.com/images/alien.svg' }
            ]
        }
    }
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above chart.

Customize Ticks

You can choose to show or hide tick marks by using the showTickMarks attribute and set to 1 or 0. Similarly you can use the showTickValues attribute to show the tick mark values. To choose a color for your tick marks use the tickMarkColor attribute and set it's value with a hex code. To choose the lenght use the tickMarkLenght attribute. To choose the thickness use the tickMarkThickness attribute. By default the number of division is based on the available chart dimensions. To choose the number of divisions use the numTicks attribute.

{
  "type": 'radialbar',
  "chart": {
    "numTicks": "5",
    "showTickMarks": 0,
  }
}

The chart will look as shown below:

FusionCharts will load here..
{
    "chart": {
        "caption": "Top 5 Android OS Market Share",
        "subCaption": "January 2021",
        "showLegend": "1",
        "showLabels": "1",
        "placeValuesInside": "0",
        "labelPosition": "start",
        "showLabelIcon": "1",
        "innerRadius": "20px",
        "outerRadius": "80px",
        "startAngle": "0",
        "endAngle": "360",
        "trackMargin": "20px",
        "trackPadding": "2px",
        "numTicks": "5",
        "showTickMarks": 0,
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Nougat 7.0",
            "value": "4.09",
            "icon": "https://cdn.example.com/images/alien.svg"
        },
        {
            "label": "Oreo 8.0",
            "value": "5.19",
            "icon": "https://cdn.example.com/images/alien.svg"
        },
        {
            "label": "Marshmallow 6.0",
            "value": "5.77",
            "icon": "https://cdn.example.com/images/alien.svg"
        },
        {
            "label": "Oreo 8.1",
            "value": "9.89",
            "icon": "https://cdn.example.com/images/alien.svg"
        },
        {
            "label": "Pie 9.0",
            "value": "21.53",
            "icon": "https://cdn.example.com/images/alien.svg"
        }
    ]
}
<chart caption="Top 5 Android OS Market Share" subcaption="January 2021" showlegend="1" showlabels="1" placevaluesinside="0" labelposition="start" showlabelicon="1" innerradius="20px" outerradius="80px" startangle="0" endangle="360" trackmargin="20px" trackpadding="2px" numticks="5" showtickmarks="0" theme="fusion">
    <set label="Nougat 7.0" value="4.09" icon="https://cdn.example.com/images/alien.svg" />
    <set label="Oreo 8.0" value="5.19" icon="https://cdn.example.com/images/alien.svg" />
    <set label="Marshmallow 6.0" value="5.77" icon="https://cdn.example.com/images/alien.svg" />
    <set label="Oreo 8.1" value="9.89" icon="https://cdn.example.com/images/alien.svg" />
    <set label="Pie 9.0" value="21.53" icon="https://cdn.example.com/images/alien.svg" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
        type: 'radialbar',
        renderAt: 'chart-container',
        width: '400',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Top 5 Android OS Market Share",
                "subCaption": "January 2021",
                "showLegend": "1",
                "showLabels": "1",
                "placeValuesInside": "0",
                "labelPosition": 'start',
                "showLabelIcon": "1",
                "innerRadius": "20px",
                "outerRadius": "80px",
                "startAngle": "0",
                "endAngle": "360",
                "trackMargin": "20px",
                "trackPadding": "2px",
                "numTicks": "5",
                "showTickMarks": 0,
                "theme": "fusion"
            },
            "data": [
                { "label": "Nougat 7.0", "value": "4.09", "icon": 'https://cdn.example.com/images/alien.svg' },
                { "label": "Oreo 8.0", "value": "5.19", "icon": 'https://cdn.example.com/images/alien.svg' },
                { "label": "Marshmallow 6.0", "value": "5.77", "icon": 'https://cdn.example.com/images/alien.svg' },
                { "label": "Oreo 8.1", "value": "9.89", "icon": 'https://cdn.example.com/images/alien.svg' },
                { "label": "Pie 9.0", "value": "21.53", "icon": 'https://cdn.example.com/images/alien.svg' }
            ]
        }
    }
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above chart.

Add Context Label

You can choose to display the context label when hovering your mouse over a bar. To do so, use the showContextLabel attribute and set it's value to 1. You can also use one of the following macros for the Context Label text:

  • $label
  • $value
  • $dataValue
  • $barColor
  • $plotIdentifier
  • $icon

For the context label text cosmetics, such as; font, font size, font color, and opacity, you can use the contextLabelFont, contextLabelFontSize, contextLabelFontColor and contextLabelAlpha attributes respectively.

Use the code given below:

{
  "type": 'radialbar',
  "chart": {
    "showContextLabel": "1",
    "defaultContextLabel": 'Android Distribution'
  }
}

The chart will look as shown below:

FusionCharts will load here..
{
    "chart": {
        "caption": "Top 5 Android OS Market Share",
        "subCaption": "January 2021",
        "showLegend": "1",
        "showLabels": "1",
        "placeValuesInside": "0",
        "labelPosition": "start",
        "showLabelIcon": "1",
        "innerRadius": "60px",
        "outerRadius": "10px",
        "startAngle": "0",
        "endAngle": "360",
        "trackMargin": "70px",
        "trackPadding": "40px",
        "showContextLabel": "1",
        "defaultContextLabel": "Android Distribution",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Nougat 7.0",
            "value": "4.09",
            "icon": "https://cdn.example.com/images/alien.svg"
        },
        {
            "label": "Oreo 8.0",
            "value": "5.19",
            "icon": "https://cdn.example.com/images/alien.svg"
        },
        {
            "label": "Marshmallow 6.0",
            "value": "5.77",
            "icon": "https://cdn.example.com/images/alien.svg"
        },
        {
            "label": "Oreo 8.1",
            "value": "9.89",
            "icon": "https://cdn.example.com/images/alien.svg"
        },
        {
            "label": "Pie 9.0",
            "value": "21.53",
            "icon": "https://cdn.example.com/images/alien.svg"
        }
    ]
}
<chart caption="Top 5 Android OS Market Share" subcaption="January 2021" showlegend="1" showlabels="1" placevaluesinside="0" labelposition="start" showlabelicon="1" innerradius="60px" outerradius="10px" startangle="0" endangle="360" trackmargin="70px" trackpadding="40px" showcontextlabel="1" defaultcontextlabel="Android Distribution" theme="fusion">
    <set label="Nougat 7.0" value="4.09" icon="https://cdn.example.com/images/alien.svg" />
    <set label="Oreo 8.0" value="5.19" icon="https://cdn.example.com/images/alien.svg" />
    <set label="Marshmallow 6.0" value="5.77" icon="https://cdn.example.com/images/alien.svg" />
    <set label="Oreo 8.1" value="9.89" icon="https://cdn.example.com/images/alien.svg" />
    <set label="Pie 9.0" value="21.53" icon="https://cdn.example.com/images/alien.svg" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
        type: 'radialbar',
        renderAt: 'chart-container',
        width: '400',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Top 5 Android OS Market Share",
                "subCaption": "January 2021",
                "showLegend": "1",
                "showLabels": "1",
                "placeValuesInside": "0",
                "labelPosition": 'start',
                "showLabelIcon": "1",
                "innerRadius": "60px",
                "outerRadius": "10px",
                "startAngle": "0",
                "endAngle": "360",
                "trackMargin": "70px",
                "trackPadding": "40px",
                "showContextLabel": "1",
                "defaultContextLabel": 'Android Distribution',
                "theme": "fusion"
            },
            "data": [
                { "label": "Nougat 7.0", "value": "4.09", "icon": 'https://cdn.example.com/images/alien.svg' },
                { "label": "Oreo 8.0", "value": "5.19", "icon": 'https://cdn.example.com/images/alien.svg' },
                { "label": "Marshmallow 6.0", "value": "5.77", "icon": 'https://cdn.example.com/images/alien.svg' },
                { "label": "Oreo 8.1", "value": "9.89", "icon": 'https://cdn.example.com/images/alien.svg' },
                { "label": "Pie 9.0", "value": "21.53", "icon": 'https://cdn.example.com/images/alien.svg' }
            ]
        }
    }
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the above chart.