Create scrollbar when access column chart on mobile

[ikram]

Hi,

I want to created guest monitoring while I can monitoring the guest on my apartment every 1 hour, and I have chosen using a column chart, it work’s fine. The problem is when I’m open page in responsive mode (mobile phone), the x label is not good looking.

Here’s the code

<script type="text/javascript">
$(function () {
var chart3 = new CanvasJS.Chart("chartContainer3",{
      title: {
        fontFamily: "tahoma"              
      },
      axisX: {
        interval: 1
      },
      axisY: {
        title: "Guest "
      },
    data: [{
      type: "column",
      dataPoints: [
        { label: "12AM",  y: 0  },
        { label: "1AM", y: 0  },
        { label: "2AM", y: 0  },
        { label: "3AM",  y: 0  },
        { label: "4AM",  y: 0  },
        { label: "5AM",  y: 0  },
        { label: "6AM", y: 0  },
        { label: "7AM", y: 1  },
        { label: "8AM",  y: 5  },
        { label: "9AM",  y: 10  },
        { label: "10AM",  y: 20  },
        { label: "11AM", y: 15  },
        { label: "12PM", y: 10  },
        { label: "1PM",  y: 3  },
        { label: "2PM",  y: 7  },
        { label: "3PM",  y: 0  },
        { label: "4PM", y: 0  },
        { label: "5PM", y: 0  },
        { label: "6PM",  y: 0  },
        { label: "7PM",  y: 0  },
        { label: "8PM",  y: 0  },
        { label: "9PM", y: 0  },
        { label: "10PM", y: 0  },
        { label: "11PM",  y: 0  }
      ]
    }]
    });
});
</script>

How do I can create my column chart responsive looking very well when I need to see so much data ?

Thank you

[Shashi Ranjan]

@ikram,

Setting the interval to 1 forces chart to show labels at every x-value of 1 over the x-axis. Removing it and let chart show labels at auto calculated interval should look better in this case.

—
Shashi Ranjan
Team CanvasJS