This is a migrated thread and some comments may be shown as answers.

Labels/Tick size for Bar Chart

1 Answer 39 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Veteran
Robert asked on 25 Sep 2019, 02:42 PM

I have a bar chart  where the x axis is a dollar amount.  Depending on the situation, this can be hundreds of dollars or millions of dollars and anywhere in between.  In my example data it is in the millions and the x-axis is over crowded. (see attached image)  In the case of thousands of dollars, the axis is not crowded.  I have tried setting MajorTicks and MajorUnit with no success.  So first is there a way to fix my example data so values are readable on the x-axis, and second, is there a way to dynamically adjust this based on the values plotted (from hundreds to millions).

Chart Code:

@(Html.Kendo().Chart<WAPDBBusiness.Charts.FlowInOutChartItem>()
                 .Name("chartFlows2")
                 .Title(title => title
                     .Text("Cash Flows")
                     .Position(ChartTitlePosition.Top)
                 )
                 .Legend(legend => legend
                     .Visible(false)
                 )
                 .SeriesDefaults(sd => sd.Bar().Stack(true))
                     .DataSource(dataSource => dataSource
                         .Group(g => g.Add(item => item.InOutField))
                                     .Read(read => read.Action("CashInOutChartData", "PracticeAnalytics"))
                 )
                 .Series(series =>
                 {
                     series.Bar( "Total", "color", "category")
                             .Name("Flows");
                 })
                 .CategoryAxis(axis => axis
                     .Categories(model => model.category))
                // .AxisDefaults(ad => ad.MajorTicks(mt => mt.Size(1000)))
                 //.ValueAxis(va => va.Numeric().MajorTicks(mt => mt.Size(1000000)))
                 //.ValueAxis(axis => axis
                 //    .Numeric().MajorUnit(1000))
                 .Tooltip(tooltip => tooltip.Visible(true).Template("#= category # (#= series.name #): #= dataItem.TotalFormatted #"))
             )

Model:

public class FlowInOutChartItem
    {
        public int? myYear { get; set; }
        public int? myQtr { get; set; }
        public decimal Total { get; set; }
        public string TotalFormatted
        {
            get
            {
                return string.Format("{0:C0}", Total);
            }
        }
        public decimal PercentOfTotal { get; set; }
        public string category
        {
            get
            {
                return "Q" + myQtr.ToString() + " " + myYear.ToString();
            }
        }
        public decimal value
        {
            get
            {
                return PercentOfTotal;
            }
        }
        public string color { get; set; }
        public string InOutField { get; set; }
    }

 

Data:

[
{
myYear: 2019,
myQtr: 2,
Total: 58417603.24,
TotalFormatted: "$58,417,603",
PercentOfTotal: 33.86,
category: "Q2 2019",
value: 33.86,
color: "#0e5a7e",
InOutField: "In"
},
{
myYear: 2019,
myQtr: 1,
Total: 44370421.48,
TotalFormatted: "$44,370,421",
PercentOfTotal: 25.71,
category: "Q1 2019",
value: 25.71,
color: "#166f99",
InOutField: "In"
},
{
myYear: 2018,
myQtr: 4,
Total: 47372210.75,
TotalFormatted: "$47,372,211",
PercentOfTotal: 27.45,
category: "Q4 2018",
value: 27.45,
color: "#2185b4",
InOutField: "In"
},
{
myYear: 2018,
myQtr: 3,
Total: 22390062.02,
TotalFormatted: "$22,390,062",
PercentOfTotal: 12.98,
category: "Q3 2018",
value: 12.98,
color: "#319fd2",
InOutField: "In"
},
{
myYear: 2019,
myQtr: 2,
Total: -31987802.56,
TotalFormatted: "($31,987,803)",
PercentOfTotal: 36.82,
category: "Q2 2019",
value: 36.82,
color: "#f70404",
InOutField: "Out"
},
{
myYear: 2019,
myQtr: 1,
Total: -29400196.53,
TotalFormatted: "($29,400,197)",
PercentOfTotal: 33.84,
category: "Q1 2019",
value: 33.84,
color: "#cc0404",
InOutField: "Out"
},
{
myYear: 2018,
myQtr: 4,
Total: -20853907.18,
TotalFormatted: "($20,853,907)",
PercentOfTotal: 24,
category: "Q4 2018",
value: 24,
color: "#a80303",
InOutField: "Out"
},
{
myYear: 2018,
myQtr: 3,
Total: -4637187.52,
TotalFormatted: "($4,637,188)",
PercentOfTotal: 5.34,
category: "Q3 2018",
value: 5.34,
color: "#840202",
InOutField: "Out"
}
]

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 27 Sep 2019, 10:47 AM

Hello Robert,

 

In order to ensure that longer labels are visible you can enable the rotation option for the respective axis. You can specify a predefined value or set the rotation to "auto" so the labels are rotated only when they would not fit the available space.

.ValueAxis(axis => axis
            .Numeric()
            .Labels(l=>l.Rotation(45))
        )

 

As for setting the MajorUnit option dynamically. You can do that via the setOptions method for the Chart. After the data is available you can call setOptions with the corresponding setting for MajorUnit. The sample below outlines the approach:

https://dojo.telerik.com/ATArurOG

 

Regards,
Viktor Tachev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Chart
Asked by
Robert
Top achievements
Rank 1
Veteran
Answers by
Viktor Tachev
Telerik team
Share this question
or