From the course: DC.js for Data Science Essential Training

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Making a stack area chart with legend

Making a stack area chart with legend - JavaScript Tutorial

From the course: DC.js for Data Science Essential Training

Start my 1-month free trial

Making a stack area chart with legend

“

- [Instructor] We can add another section to our area chart using stack, so let's do that with tip because our area chart shows total, so it's a legitimate, meaningful thing to show the tip on top of the total. So the first thing we need to do is change our cross-filter data because the HTML structure of our div is absolutely fine. We can say, total payment plus tip, for good measure there, and then we could say, var dateGroupTip equals dateDimension, so we're using the same dimension that we used for the original layer of data, and this is normal in a stack chart, you'd normally share the dimension because you share the x-axis, so we say, dateDimension.group(), or group 0, .reduceSum and the function then returns d.tip instead of d.total, and that's because we have a tip property up here. Now we supply the new group into a parameter of .stack, like so, and we can say, dateGroupTip and when we do this, in order to distinguish between the two we make use of an optional second…

Contents