Skip to content Skip to sidebar Skip to footer
Home / D3.js / Dc.js / Javascript / Legend / Pie Chart

Pie Chart Legend In Dc.js 1.7 Not Showing Up

Post a Comment
I'm trying to create a pie chart legend in dc.js. However, there is no legend. It just... doesn't show up. Everything appears the same as before I used the legend command. Here

Solution 1:

I think you are not doing anything wrong. Its the problem with the version of dc.js you are using. Please check http://jsbin.com/xasenusu/1/. I have changed the version of dc.js as well as gave the div a little more space to svg.

 <!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.min.js"></script>
  <script type="text/javascript" src="http://dc-js.github.io/dc.js/js/dc.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
    <style>
    #pie-chart-sales-by-company svg{width:350px;}</style>
</head>
<body>

<div id="pie-chart-sales-by-company"></div>
</body>
</html>

Solution 2:

For me, this solutions doesn't works. So I developed the legend manually. For each value, I put some CSS to indicate the color and the percentage there. This is not the best solution but works. I hope the version 2.0 stable come on very soon!

CSS

#precos-legenda {
    float:left;
    width: 150px;
    height: 150px;
    text-align:left;
}

.quadradinho{
    width: 13px;
    height: 13px;
    background: #ff7373;
    float:left;
}

.elemento-legenda{
    display: table-row;

}

JS

f.forEach(function(item) {
        $("#precos-legenda").append("<div id=" + item.key + " class='elemento-legenda'><div class='quadradinho' style='background: " + cores_legenda[item.key] + "'></div> <div class='texto-legenda'>" + item.key + "\t\t\t (" + (item.value / total * 100).toFixed(1) + "%) " + "</div></div>");

    });

HTML

    <div class="chart-stage">
      <div id="precos-chart"></div>
      <div id="precos-legenda">

    </div>

Post a Comment for "Pie Chart Legend In Dc.js 1.7 Not Showing Up"