[CLOSED] Bar Chart overlapping the Category Axis when there are only negative values

[PriceRightHTML5team]

Hi,

I have a bar chart is plotted using positive & negative values, there are some scenario in which bar chart is plotted using negative values.
The issue is, if the bar chart is build with the negative values, it is overlapping the Category Axis and if there is both negative & positive values chart is displaying correctly.

Chart with Positive and Negative values:


Chart with Negative values only.


Here is my sample code:

//Model

  public class ChartModel
        {
            public string Name { get; set; }
            public int Data1 { get; set; }
        }

// Controller

public StoreResult GenerateNegativData()
        {
            List<ChartModel> lst = new List<ChartModel>();
            ChartModel cm = new ChartModel();

            //*****To generate bar chart with Positive & negative values uncomment this******//
            //cm = new ChartModel();
            //cm.Name = "Country - 1";
            //cm.Data1 = 96498000;
            //lst.Add(cm);

            cm = new ChartModel();
            cm.Name = "Country - 2";
            cm.Data1 = -4289142;
            lst.Add(cm);

            cm = new ChartModel();
            cm.Name = "Country - 3";
            cm.Data1 = -4502571;
            lst.Add(cm);

            cm = new ChartModel();
            cm.Name = "Country - 4";
            cm.Data1 = -4929428;
            lst.Add(cm);

            return new StoreResult(lst);
        }

        public ActionResult NegativeBarChart()
        {
            return View();
        }

// View

@{
    ViewBag.Title = "Bar Chart";
    var X = Html.X();
}

@(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig))

@{
    <h3>Bar Chart Sample</h3><br />
        
    

    @(X.Panel()
        .Title("Column Chart")
        .Layout(LayoutType.Fit)
        .Items(
            X.Chart()
                .ID("Chart1")
                .Width(800)
                .Height(600)
                .Shadow(true)
                .StyleSpec("background:#fff;")
                .Animate(true)
                .Store(X.Store()
                    .Data(Model)
                    .Model(X.Model()
                        .Fields(
                            X.ModelField().Name("Name"),
                            X.ModelField().Name("Data1")
                        )
                    )
                    .Proxy(X.AjaxProxy()
                        .Url(Url.Action("GenerateNegativData"))
                        .Reader(X.JsonReader().Root("data"))
                    )
                )
                .Axes(
                    X.NumericAxis()
                        .Fields("Data1")
                        .Grid(true)
                        .Title("Revenue")
                        .Label(X.AxisLabel().Rotate(X.RotateAttribute().Degrees(0))
                            .Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0,0');")
                        ),
                    X.CategoryAxis()
                        .Position(Position.Bottom)
                        .Fields("Name")
                        .Title("Scenario")
                         .Label(X.AxisLabel()
                            .Rotate(X.RotateAttribute().Degrees(315))
                        )
                       
                )
                .Series(X.ColumnSeries()
                    .Axis(Position.Left)
                    .Highlight(true)
                    .XField("Name")
                    .YField("Data1")
                    .Tips(X.ChartTip()
                        .TrackMouse(true)
                        .Width(140)
                        .Height(28)
                        .Renderer(r => r.Handler = "this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1'));")
                    )
                    .Label(X.SeriesLabel()
                        .Display(SeriesLabelDisplay.InsideEnd)
                        .Field(new [] { "Data1" })
                        .Orientation(Orientation.Horizontal)
                        .Color("#333")
                        .TextAnchor("middle")
                        .Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0');")
                    )
                )
        )
    )
}

Thanks

[Daniil]

Hi @PriceRightHTML5team,

Yes, it is a problem. I can suggest the following solution.

Ext.chart.axis.Axis.override({
    getRange: function() {
        var range = this.callParent(arguments);

        if (range.max < 0) {
            range.max = 1;
        }

        return range;
    }
});

[PriceRightHTML5team]

Thanks Daniil..

It is working fine.