Standalone Examples » Customizing segment colours

This example shows you how to set custom colours for a your pie chart segments. It demonstrates two techniques:

1. The default colours have been set in misc.colors.segments (the greys).
2. The third segment has been set to green directly in the segment's entry in data.content. That location will always overwrite the misc.colors.segments setting.

var pie = new d3pie("pie", {
	header: {
		title: {
			text: "Fun with Colours"
		}
	},
	size: {
		pieOuterRadius: "100%",
		canvasHeight: 360
	},
	data: {
		content: [
			{ label: "Bushtit", value: 5 },
			{ label: "Chickadee", value: 2 },
			{ label: "Elephants", value: 6, color: "#00aa00" }, // here!
			{ label: "Killdeer", value: 3 },
			{ label: "Caspian Tern", value: 2 },
			{ label: "Blackbird", value: 1 },
			{ label: "Song Sparrow", value: 6 },
			{ label: "Blue Jay", value: 5 }
		]
	},
	misc: {
		colors: {
			segments: [
				"#999999", "#888888", "#777777", "#666666", "#555555", "#444444", "#333333", "#222222"
			]
		}
	}
});