Kendo UI DataViz bar chart x axis labels overlapping

Question

X axis labels are overlapping in MVC4 bar chart. any idea to fix it. Thanks in advance.

@(Html.Kendo().Chart<McAfee.CBRMS.CodeAnalysisReport.BL.Utility.ModuleViewModel>()
        .Name("StaticAnalysisOverAllBarGraph")
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("GetStaticAnalysisOverAllBarGraph", "Home",new { filepath = ViewData["filePath"], jobId = ViewData["jobId"]}))
        )
      .Series(series => {
          series.Column(model => model.CriticalErrors).Name("Critical Errors").Color("DarkRed");

      series.Column(model => model.Errors).Name("Errors").Color("Red");
      series.Column(model => model.CriticalWarning).Name("Critical Warning").Color("Orange");
      series.Column(model => model.Warning).Name("Warnings").Color("Yellow");
    })
     .ValueAxis(axis => axis.Numeric()
        .Labels(labels => labels.Rotation(5)
            .Format("{0}")
        )
    )
    .CategoryAxis(axis => axis
        .Categories(model => model.Name)
        )
        .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0}")
    )
    )

Answer 1

categoryAxis: { labels: { rotation: -45 },

will this help ? change the degree to prevent overlapping . You could also make labels invisible (,visible:false) and give tooltip instead

Answer 2

Try this example,

<script>
    function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Site Visitors Stats /thousands/"
            },
            legend: {
                visible: true
            },
            seriesDefaults: {
                type: "bar"
            },
            series: [{
                name: "Total Visits",
                data: [56000, 63000, 74000, 91000, 117000, 138000]
            }, {
                name: "Unique visitors",
                data: [52000, 34000, 23000, 48000, 67000, 83000]
            }],
            valueAxis: {
                max: 140000,
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                }
            },
            categoryAxis: {
                labels: {
                    background: "green",
                    color: "white",
                    visible:true
                },
                categories: ["Janasdfasdfasdfasdfsadfasdf", "Febasdfasdfasdfasdfjhkhsadf", "Marasdfasdfasdfasdfasdfasdf", "Apr", "May", "Jun"],
                crosshair: {
                    tooltip: {
                        padding: {
                            right: 20,
                            left: 20
                        },
                        background: "green",
                        visible: true
                    },
                    visible: true
                },
                majorGridLines: {
                    visible: true
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        });
    }

    $(document).ready(createChart);
</script>

Html View

<div id="chart">
</div>

Use crosshair for lable tooltip . I don't know how to breake 150 character of lable but if you do visible:false in labels then your lable only show in tooltip