CODEWITHSUNDEEP
javascripthtmlcharts
User1493
User1493

Reputation: 491

How to increase the gap between legends in horizontal format?

I have created a chart in which the legends are getting overlapped. I tried by increasing the value of gap(). But it only works when the legends are in vertical mode. I used the following code for the chart. Please help me out here to move the legends, so that they wont get overlapped. currentanalysis is the chart's name.

currentanalysis


.width(280)  
.height(190)  
.dimension(currentanalysisdimension)
.group(Incoming2)
.group(Outgoing2)
.elasticY(true)
.yAxisPadding(1)
.x(d3.scale.ordinal().domain(["2","3","4","5"]))
.xUnits(dc.units.ordinal)
.legend(dc.legend().x(0).horizontal(true).y(170).itemHeight(20).gap(0))
.compose([
     dc.lineChart(currentanalysis)
          .dimension(currentanalysisdimension)
          .colors('blue')
          .group(Incoming2, "Incoming/Download")
          .dashStyle([10,0])
          .renderDataPoints({radius: 4, fillOpacity: 0.8, strokeOpacity: 0.8}),

     dc.lineChart(currentanalysis)
          .dimension(currentanalysisdimension)
          .colors('orange')
          .group(Outgoing2, "Outgoing/Upload")
          .dashStyle([10,0])
          .renderDataPoints({radius: 4, fillOpacity: 0.8, strokeOpacity: 0.8}),

        ])


    .renderlet(function (chart) {
                    chart.selectAll("g._3").attr("transform", "translate(" + 15 + ", 0)");
                    chart.selectAll("g._2").attr("transform", "translate(" + 15 + ", 0)");
                })
 .render()
 });

I'm getting the result as:

enter image description here

Upvotes: 1

Views: 125

Answers (1)

Vivek Kumar Kalaimani
Vivek Kumar Kalaimani

Reputation: 81

Use the following piece of code. This will work.

.legend(dc.legend() .x(10).y(195).itemWidth(120).horizontal(true))

Upvotes: 1

Related Questions