1

I have a couple of graphs made with D3 but I have problems when I want to display them on small devices. They are cut off on left and right sides and I cannot see them properly.

I have no idea how to fix it, I have tried to change the dimensions of the canvas through the CSS when the screen size is small but I could not. I hope you can help me. I guess I have to introduce some change in the CSS and in the bit of code where I set the size of the graph.

var margin = {top: 100, right: 111, bottom: 50, left: 120},
    width = 960 - margin.left - margin.right,
    height = 560 - margin.top - margin.bottom;


var svgbar = d3.select("#barforest").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

Thanks

Michael Ro
  • 19
  • 3
  • Possible duplicate of [responsive D3 chart](https://stackoverflow.com/questions/17626555/responsive-d3-chart) – ksav Nov 13 '18 at 08:18

1 Answers1

0

In your code, you have set the width, height and margins fixed. If you want your graph responsive, you have to register a resize event and redraw with appropriate width and height.

Hari Prathap
  • 102
  • 7