How to make a d3 pie chart responsive?

Question

I have a PIE chart. And it works okay but I can't make it work to be responsive and resizable . I need it to be compatible for a mobile browser and Ipad etc.

I tried to wrap it to bootstrap but this doesn't make it fully resizable

How can I make it resizable depending on mobile device or desktop ?

(PS: I'm using an example from here https://dzone.com/articles/d3js-pie-charts-made-super-easy-d3pie)

user_1242389 · Answer

You can use the size setting to scale the chart, and some CSS to center. Finally an resize event to update everything when the screen size changes.

var data = [
  { label: "1", value: 1 },
  { label: "2", value: 4 },
  { label: "3", value: 3 }
];

var pie;

var update = function () {
  if (pie) pie.destroy();
  var size = Math.min(innerHeight, innerWidth);
  var opt =  {
    data: {
      content: data
    },
    size: {
      canvasHeight: size,
      canvasWidth: size,
    }
  };
  pie = new d3pie("pie", opt);
};

update();

window.addEventListener('resize', update)

#pie > svg {
  margin: 0 auto;
  display: block;
}

user_549372 · Answer

destroying the chart is not exactly "responsive". the code-snippet only scales in "full page" mode (because the embed has fixed dimensions); but it scales dynamically, as it should be. there still may be space for improvement.

var chart, svg, width, height;
var data = [
  { label: "1", value: 1 },
  { label: "2", value: 4 },
  { label: "3", value: 3 }
];

$(function() {
  chart = new d3pie("#container", {data: {content: data}});
  svg = d3.select("#container > svg");
});

$(window).on('resize', function() {
    width = $(window).width();
    height = $(window).height();
    svg
      .attr("width", '100%')
      .attr("height", '100%')
      .attr('viewBox','0 0 ' + height + ' ' + width)
      .attr('preserveAspectRatio', 'xMinYMin')
      .append("g")
      .attr("transform", "translate(" + height + "," + width + ")");
});

html, body {margin: 0; height: 100%; overflow: hidden;}
div#container > svg {min-height: 200px;}

How to make a d3 pie chart responsive?

2 Answers