Can you make a legend for Bubble Chart?

There is currently no example on the web for a bubble chart with legend using dc.js with dc.legend () function.

        .margins({top: 100, right: 10, bottom: 30, left: 25})
            return d.value.src_category;
        .keyAccessor(function (d) {
            var x = d.value.avg_time/d.value.count;
            return x;
        .valueAccessor(function (d) {
            var y = d.value.hundred_bounce_rate/d.value.count;
            return y;
        .radiusValueAccessor(function (d) {
            var r = Math.round(d.value.sessions/d.value.count);
            return r;
            return [p.key,
               "Average Time On Page: " + (p.value.avg_time/p.value.count).toFixed(2),
               "100 - Bounce Rate: " + (p.value.hundred_bounce_rate/p.value.count).toFixed(2),
               "Sessions / Page Views: " + (p.value.sessions/p.value.count).toFixed(2)]
        .xAxisLabel('Average Time On Page')
        .yAxisLabel('100 - Bounce Rate')


There MUST be some way to use legends in the bubble chart.
1) We used the top margins.
2) The colorAccessor () function is used to color the bubbles with a group.
3) The 'g' element is appended to 'svg' and the 'dc-legend' class is assigned to the 'g' element. But there are no children in the legend.


source to share

1 answer

It was talked about github here: .

However, as far as I know, you'll have to hack it if you want a legend in this case.



All Articles