Donut chart customisation for chartjs - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Configuration

Description

Donut chart customisation for chartjs

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>jQuery Donut Chart</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script> 
      <script type="text/javascript" src="http://www.jqwidgets.com/public/2.4.0/jqxcore.js"></script> 
      <script type="text/javascript" src="http://www.jqwidgets.com/public/2.4.0/jqxdata.js"></script> 
      <script type="text/javascript" src="http://www.jqwidgets.com/public/2.4.0/jqxchart.js"></script> 
      <link rel="stylesheet" type="text/css" href="http://www.jqwidgets.com/public/2.4.0/styles/jqx.base.css"> 
      <script type="text/javascript">
    $(window).load(function(){/*ww  w .  j a va2  s  . c om*/
var data = [
    {Responses: "Accepted", Share: 33.3},
    {Responses: "Unresponded", Share: 26.5, Color: "#ffff00"},
    {Responses: "Rejected", Share: 25.4}
]
var source =
{
    datatype: "array",
    datafields: [
        { name: 'Responses' },
        { name: 'Share' }
    ],
    localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source, { 
   async: false, 
   autoBind: true, 
   loadError: function (xhr, status, error) { 
       console.log('Error loading "' + source.url + '" : ' + error); } 
   });
   
$.jqx._jqxChart.prototype.colorSchemes.push({ name: 'myScheme', colors: ['#349492', '#d2d2d2', '#5f5e5c'] });
var settings = {
    title: "Geoff's Birthday Party",
    description: "",
    enableAnimations: true,
    showLegend: true,
    legendPosition: { left: 520, top: 140, width: 100, height: 100 },
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    colorScheme: 'myScheme',
    seriesGroups:
        [
            {
                type: 'donut',
                useGradient: false,
                showLabels: true,
                series:
                    [
                        {
                            dataField: 'Share',
                            displayText: 'Responses',
                            labelRadius: 160,
                            initialAngle: 15,
                            radius: 130,
                            innerRadius: 90,
                            centerOffset: 0,
                            formatSettings: {decimalPlaces:1 },
                            color:'#00000'
                        }
                    ]
            }
        ]
};
$('#jqxChart').jqxChart(settings);
    });

      </script> 
   </head> 
   <body> 
      <div id="jqxChart" style="width: 680px; height: 400px; position: relative; left: 0px;
    top: 0px;"> 
      </div>  
   </body>
</html>

Related Tutorials