X-axis appearing in the wrong place

[Christopher Ronak]

Hi There,

I'm trying out the new chart feature and I'd like to ask a bit of help with how to make the chart a bit more tidy. I've attached a screenshot of my chart so that you can see what I mean. A couple things are happening:
1. The x-axis (date) is appearing in the middle of the chart when there are negative numbers on the y-axis. Can I force it to appear at the bottom?
2. The numbers are overwriting each other. I've tried positioning the text on top and bottom and to the side, but depending on the data, that positioning doesn't always help. Any suggestions as to how I can avoid this?

Here's my chart (please see screenshot attached):

<%= Html.Telerik().Chart(Model)
            .Name("ProjectCashflowChart")
            .Title(title => title
                .Text("Predictive Cashflow")
            )
            .Legend(legend => legend
                .Position(ChartLegendPosition.Top)
                .Visible(true)
            )
            .SeriesDefaults(series => {
                series.Line().Stack(false).Labels(true);
            })
            .Series(series => {
                series.Line(v => v.InvoiceTotal).Name("Total Income").Labels(l => l.Format("${0:#,##0}").Position(ChartLineLabelsPosition.Below))
                        .Markers(markers => markers.Type(ChartMarkerShape.Circle));
                series.Line(s => s.CostEstimate).Name("Total Spend").Labels(l => l.Format("${0:#,##0}"));
                series.Line(s => s.NetCash).Name("Net Cash").Labels(l => l.Format("${0:#,##0}"));
                })
            .CategoryAxis(axis => axis
                .Categories(s => s.InvoiceDateString).Labels(l=> l.Rotation(20))
            )
            .ChartArea(area => area
                .Background("#F0F0F0")
            )
            .ValueAxis(axis => axis
                                .Numeric().Labels(l => l.Format("${0:#,##0}")))
            .HtmlAttributes(new { style = "width: 1000; height: 600px; font-size:10px" })
    %>

Thanks for your help!

Chris

[T. Tsonev]

Hi Christopher,

You can set the value where the category axis crosses the value axis:

.ValueAxis(axis => axis
    .AxisCrossingValue(-1500000)
)

The label placement is something that we look forward to improve in future versions. For the moment I can only suggest to use a tooltip instead of labels.

Regards,
Tsvetomir Tsonev
the Telerik team

[Peter]

Hi Tsvetomir Tsone,

How to make the x-axis labels (Supplier names) to appear vertical or slant, so can avoid these names overlapping in x-axis.

Thanks
Srini

                <%= Html.Telerik().Chart(Model)
                        .Name("chart")
                        .Title(title => title
                        .Text("Bubble Tracking")
                        )
                        .Legend(legend => {
                            legend.Border(1,"black").Margin(10);
                            legend.Position(ChartLegendPosition.Top);
                        })
                        .SeriesDefaults(defaults => {
                            defaults.Column().Stack(true);
                        })
                        .Series(series => {
                            series.Column(s => s.Stalled).Name("Stalled").Color("red");
                            series.Column(s => s.Waiting).Name("Waiting").Color("blue");
                            series.Column(s => s.Active).Name("Active").Color("green");
                        })
                        .HtmlAttributes(new { style = "width: 800px; height: 300px"})
                        .CategoryAxis(axis => axis.Categories(s => s.ID))                        
                %>

[T. Tsonev]

Hi Peter,

You can use the Rotation property as shown in this example.

.CategoryAxis(axis => axis
    .Categories(s => s.ID)
    .Labels(labels => labels.Rotation(-45))
)

I hope this helps.

Kind regards,
Tsvetomir Tsonev
the Telerik team