Donut chart

Donut or Doughnut chart is just a simple pie chart with a hole inside. You can define hole radius to any size you need, both in percent or pixels. <h2>Donut chart with patterns</h2> Click on PATTERNS theme above the chart - you will see that our pie or donut chart supports patterns. There are several pre-build patterns in our package or you can easily build your own fancy patterns and use them with our charts.

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="asset--chart"></div>

CSS

#asset--chart {
	width		: 100%;
	height		: 500px;
	font-size	: 11px;
}

JavaScript

var pieChartData = [
    {
        asset: 'Funiture',
        marketValue: 50000.00
    }, {
        asset: 'Cash',
        marketValue: 6250.00
    }, {
        asset: 'Car',
        marketValue: 10000.00
    }, {
        asset: 'Other',
        marketValue: 11250.00
    }
];

    chartAsset = AmCharts.makeChart(
        'asset--chart', {
            type: 'pie',

            dataProvider: pieChartData,
            valueField: 'marketValue',
            titleField: 'asset',

            startEffect: 'easeOutSine',
            pulledField: 'pullOut',
            //pullOutOnlyOne: true,
            // pullOutEffect: 'easeInSine',

            responsive: {
              enabled: true
            },

            labelsEnabled: false,

            balloon: {
                fillAlpha: 0.95,
                borderThickness: 1,
                borderColor: '#000000',
                shadowAlpha: 0,
            }
        }
    );

    chartAsset.addListener('rollOverSlice', function(e) {
        chartAsset.clickSlice(e.dataItem.index);
    });
    chartAsset.addListener('rollOutSlice', function(e) {
        chartAsset.clickSlice(e.dataItem.index);
    });