- Add a padding between each of the chart bars.
- What about adding some color to each bar, based on the product Id ?
Some tips:
-
We can treat product category as an ordinal.
-
We can create a function that returns a color based on an existing d3 SchemeCategory
// helper that returns a color based on an ID
var barColor = d3.scaleOrdinal(d3.schemeCategory10);The React it self has an attribute called filled, we can attach to it a function(d) extract from it the current product and invoke the color function we have previously created.
- Let's rotate 90º the bar chart, we want it to show it like:
If you need some help, a similar sample can be found:
- Add one more line to the chart, this line will represent a set of expenses.
- Create a Doughnut like chart.
- Make the pie chart scale and take all the available canvas space, plus include margin for legend.