Home forums Using CanvasJS Create scrollbar when access column chart on mobile

This topic contains 1 reply, has 2 voices, and was last updated by  Shashi Ranjan 1 month, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #26135

    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

    #26174

    @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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.