Search code examples
canvasjs

change type of labels of x-axis in column chart


I am using 2 chart of canvasjs plugin piechart and columnchart. In piechart labels of the elements are so fine it uses all the spaces into content free but column chart if one label is length is big it skipped. But I dont want it to skip. so this is my question, is there any way using labels(X-Axis only) in column chart(barchart) like just like in piechart ?

Thank you.

Note: I parse it, change it etc. everything comes up another problem if I interrupt the plugin itself so I need though solution.


Solution

  • Charts automatically skips label when they are too close to avoid overlapping. You can override this behavior by setting interval to 1.

    Refer Axis X Interval for more detail.

    Here is an example:

    var chart = new CanvasJS.Chart("chartContainer",
        {
          axisX:{
            title: "Axis X with interval 1",
            interval: 1
         },
          data: [
          {
            type: "column",
            dataPoints: [
            { x: 1, y: 71 },
            { x: 2, y: 55 },
            { x: 3, y: 50 },
            { x: 4, y: 65 },
            { x: 5, y: 95 },
            { x: 6, y: 68 },
            { x: 7, y: 28 },
            { x: 8, y: 34 },
            { x: 9, y: 14 },
            { x: 10, y: 14 },
            { x: 11, y: 71 },
            { x: 12, y: 55 },
            { x: 13, y: 50 },
            { x: 14, y: 65 },
            { x: 15, y: 95 },
            { x: 16, y: 68 },
            { x: 17, y: 28 },
            { x: 18, y: 34 },
            { x: 19, y: 14 }
            ]
          }
          ]
        });
    
        chart.render();
    <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <br/>
    <div id="chartContainer" style="height: 360px; width: 100%;"></div>