Labels/Tick size for Bar Chart

[Robert]

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"
}
]

[Viktor Tachev]

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