Vinoth Kumar Vinoth Kumar - 1 month ago 7
HTML Question

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

Answer

Use the following piece of code. This will work.

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