D3 Donut Chart Not Visible Entirely When In Mobile View

I am showing up some data using d3 donut chart as shown below, however when I switch to mobile view, chart is not visible properly how can I make it work or make it show entire don

Solution 1:

I assume you're setting the size of your chart once when the page gets rendered.

When setting static values you need to listen to resize to make your chart responsive: https://api.jquery.com/resize/ (Maybe only rerender when resize ends : jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?)

I'm not getting the relation between "chart-time-spent" and your "chart-total-users"

I set up a fiddle having Bootstrap and d3 as well as your base variables:

var width = $(".chart-time-spent").width(),
    height = 250,
    radius = Math.min(width, height) / 2,
    legendPosY = (height / 2) - 20;

https://jsfiddle.net/772n9mrn/6/

If resize does not solve your problem, try to describe it there.