CanvasJS bar not all labels showing

Question

The labels on my bar chart are not all showing up. maybe because it was too narrow, so they are alternating in showing up.

I tried a lot of things, nothing worked:

• interval: 1

• ticklength: 1

• setting culture

http://www.jeroenchristens.be/ReadingLists/Graph2

<div id="chartContainer2"></div>
<script type="text/javascript">
                var result2 = @Html.Raw(ViewBag.DataPoints2);
                var dataPoints2 =[];
                for(var i = 0; i < result2.length; i++){
                    dataPoints2.push({label:result2[i].x, y:result2[i].y});
                }

                                                                   window.onload = function () {
                                                                       var chart2 = new CanvasJS.Chart("chartContainer2", {
                                                                           theme: "theme2",
                                                                           animationEnabled: true,
                                                                           title: {
                                                                               text: "series"
                                                                           },
                                                                           subtitles: [
                                                                               { text: "" }
                                                                           ],
                                                                           data: [
                                                                               {
                                                                                   zoomEnabled: true,
                                                                                   animationEnabled: true,
                                                                                   indexLabelFontFamily: "Garamond",
                                                                                   indexLabelFontSize: 15,
                                                                                   indexLabel: "{y}",

                                                                                                                                                                          axisX: {
                                                                                       labelFontSize: 10,
                                                                                       interval: 1,
                                                                                       labelAngle: -70,
                                                                                       interlacedColor: "#F8F1E4",
                                                                                       tickLength: 1,
                                                                                       labelMaxWidth: 70

                                                                                   },
                                                                                   axisY: {
                                                                                       labelFontSize: 10,
                                                                                       interval: 1,
                                                                                       labelAngle: -70,
                                                                                       interlacedColor: "#F8F1E4",
                                                                                       tickLength: 1,
                                                                                       labelMaxWidth: 100



                                                                                   },
                                                                                   showInLegend: true,
                                                                                   toolTipContent: "{label} {y}",
                                                                                   type: "bar", //change type to bar, line, area, pie, etc
                                                                                   dataPoints: dataPoints2
                                                                               }
                                                                           ]
                                                                       });
                                                                       chart2.render();

                                                                   };

Answer 1

axisX and axisY are properties of chart and not dataSeries. Following code should work fine in your case.

window.onload = function () {
var chart2 = new CanvasJS.Chart("chartContainer2", {
    theme: "theme2",
    animationEnabled: true,
    title: {
        text: "series"
    },
    subtitles: [{ 
        text: "" 
    }],
    axisX: {
        labelFontSize: 10,
        interval: 1,
        labelAngle: -70,
        interlacedColor: "#F8F1E4",
        tickLength: 1,
        labelMaxWidth: 70
    },
    axisY: {
        labelFontSize: 10,
        interval: 1,
        labelAngle: -70,
        interlacedColor: "#F8F1E4",
        tickLength: 1,
        labelMaxWidth: 100
    },
    data: [{
        zoomEnabled: true,
        animationEnabled: true,
        indexLabelFontFamily: "Garamond",
        indexLabelFontSize: 15,
        indexLabel: "{y}",
        showInLegend: true,
        toolTipContent: "{label} {y}",
        type: "bar", //change type to bar, line, area, pie, etc
        dataPoints: dataPoints2
    }]
});

chart2.render();
}