This is a migrated thread and some comments may be shown as answers.
X-axis appearing in the wrong place
3 Answers 62 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Christopher Ronak
Top achievements
Rank 1
Christopher Ronak asked on 13 Sep 2011, 09:55 PM
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

3 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 14 Sep 2011, 10:51 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Peter
Top achievements
Rank 1
answered on 06 Oct 2011, 08:23 PM
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))                        
                %>
0
T. Tsonev
Telerik team
answered on 07 Oct 2011, 10:29 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
Tags
Chart
Asked by
Christopher Ronak
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Peter
Top achievements
Rank 1
Share this question
or