Skip to content

Doughnut Chart

A doughnut chart is a circular chart divided into sectors where the arc length of each sector, its central angle, and its area is proportional to the quantity it represents.
You can learn more

Caption

The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption, as well as configure its font properties and cosmetics. Learn more about it

Subcaption

The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.

Data Plot

Data plot refers to the doughnut slices in a doughnut chart, columns of the column chart, lines in a line chart.

Data Labels

Data labels refers to the labels associated with each doughnut slice

Data Values

Data values refers to values associated with each doughnut slice.

Legend

A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.

Create a doughnut Chart

Let's create our first doughnut chart which will showcase the split of visitors for one year.

To create a doughnut chart follow the steps given 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 doughnut chart, set doughnut.
  • Set the container object using renderAt attribute.
  • Specify the dimension of the chart using width and height attributes.
  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

For a detailed list of attributes, refer to the doughnut charts attribute page.

The doughnut chart for the above code looks like:

    
FroalaCharts will render here
{
  "chart": {
    "caption": "Android Distribution for our app",
    "exportEnabled": "1",
    "subcaption": "For all users in 2017",
    "showpercentvalues": "1",
    "defaultcenterlabel": "Android Distribution",
    "aligncaptionwithcanvas": "0",
    "captionpadding": "0",
    "decimals": "1",
    "plottooltext": "$percentValue of our Android users are on $label",
    "centerlabel": "# Users: $value",
    "theme": "froala"
  },
  "data": [
    {
      "label": "Ice Cream Sandwich",
      "value": "1000"
    },
    {
      "label": "Jelly Bean",
      "value": "5300"
    },
    {
      "label": "Kitkat",
      "value": "10500"
    },
    {
      "label": "Lollipop",
      "value": "18900"
    },
    {
      "label": "Marshmallow",
      "value": "17904"
    }
  ]
}
<html>

<head>
      <title>My first chart using FroalaCharts</title>
     
    <script src="https://unpkg.com/[email protected]/froalacharts.js"></script>
    <script src="https://unpkg.com/[email protected]/themes/froalacharts.theme.froala.js"></script>

    <script type="text/javascript">   
        var data = {
            chart: {
			
    caption: "Android Distribution for our app",
	exportEnabled:"1",
    subcaption: "For all users in 2017",
    showpercentvalues: "1",
    defaultcenterlabel: "Android Distribution",
    aligncaptionwithcanvas: "0",
    captionpadding: "0",
    decimals: "1",
    plottooltext:
      "<b>$percentValue</b> of our Android users are on <b>$label</b>",
    centerlabel: "# Users: $value",
    theme: "froala"
  },
  data: [
    {
      label: "Ice Cream Sandwich",
      value: "1000"
    },
    {
      label: "Jelly Bean",
      value: "5300"
    },
    {
      label: "Kitkat",
      value: "10500"
    },
    {
      label: "Lollipop",
      value: "18900"
    },
    {
      label: "Marshmallow",
      value: "17904"
    }
  ]
};

        FroalaCharts.ready(function () {
            froalacharts = new FroalaCharts({
                id: "chart_1",
                type: 'doughnut',
                renderAt: 'ft',
                width: '800',
                height: '500',
                dataSource: data
            });
            froalacharts.render();
        });
    </script>
    
</head>


<div id="msg" class="mb-20"> Chart data in the selected format will be displayed here.</div>

<body>
    <div id="ft">FroalaCharts will render here</div>
</body>

</html>