CanvasJS jQuery Plugin provides several customization options to change the look and functionality of the graph. Given example shows Pie Chart with index / data labels placed inside the Chart. It also contains source code that you can edit in-browser or save to run it locally.
window.onload = function() { var options = { exportEnabled: true, animationEnabled: true, title:{ text: "Accounting" }, legend:{ horizontalAlign: "right", verticalAlign: "center" }, data: [{ type: "pie", showInLegend: true, toolTipContent: "<b>{name}</b>: ${y} (#percent%)", indexLabel: "{name}", legendText: "{name} (#percent%)", indexLabelPlacement: "inside", dataPoints: [ { y: 6566.4, name: "Housing" }, { y: 2599.2, name: "Food" }, { y: 1231.2, name: "Fun" }, { y: 1368, name: "Clothes" }, { y: 684, name: "Others"}, { y: 1231.2, name: "Utilities" } ] }] }; $("#chartContainer").CanvasJSChart(options); }
indexLabelPlacement property can be used to place the indexLables either "inside" or "outside" the dataPoint. Some other commonly used customization options are indexLabelBackgroundColor, color, explodeOnClick, etc.