Donut Chart Demo - Britecharts Donut Chart with Legend The code donutChart .width(containerWidth) .height(containerWidth) .externalRadius(containerWidth/2.5) .internalRadius(containerWidth/5) .colorScheme(briteChartsColors) .on('customMouseOver', function(data) { legendChart.highlight(data.data.id); }) .on('customMouseOut', function() { legendChart.clearHighlight(); }); donutContainer.datum(dataset).call(donutChart); legendContainer.datum(dataset).call(legendChart); Colors You can also check other color schemas: Data Input Check the data input schema of this chart. Export Chart You can also export this chart by pressing: Small Donut Chart with Inline Legend The code donutChart .width(containerWidth) .height(containerWidth/1.8) .externalRadius(containerWidth/5) .internalRadius(containerWidth/10) .on('customMouseOver', function(data) { legendChart.highlight(data.data.id); }) .on('customMouseOut', function() { legendChart.clearHighlight(); }); donutContainer.datum(dataset).call(donutChart);