Resize column-chart with no fixed count columns

[Mikhail]

Hi!

I work with mvc ext.net.

I want to create a column chart. My X-axis chart may have one or two columns, as many columns. I want that the columns have a fixed width, and if their number is greater than the screen size, the Chart shall have a horizontal scrolling.

How it is implemented? Thank you.

P.S. EXAMPLE mvc.ext.net on a fixed number of columns.

[Mikhail]

I'm sorry, but I understood how solved this problem.
We set for Panel which contains Chart LayoutType.HBox and AutoScroll(true). For chart we don't set width and for store set Listeners: .Listeners(le => le.Load.Handler = "App.chrtSellCommodity.setWidth(170 * records.length)")

where 170 - const width one column chart.

Html.X().Panel()
                    .Title("График")
                    .Layout(LayoutType.HBox)
                    .Height(600)
                    .AutoScroll(true)
                    .TopBar(Html.X().Toolbar()
                        .Items(
                            Html.X().Button()
                                .Text("Обновить")
                                .Icon(Icon.ArrowRefresh)
                                .Handler("#{chrtSellCommodity}.getStore().reload()")
                        )
                    )
                    .Items(
                        Html.X().Chart()
                            .ID("chrtSellCommodity")
                            .Shadow(true)
                            .Animate(true)
                            .Height(430)
                            .StyleSpec("background:#fff;")
                            .Store(Html.X().Store()
                                           .ID("stBarSellCommodity")
                                           .Model(Html.X().Model()
                                               .Fields(
                                                   Html.X().ModelField().Name("Name"),
                                                   Html.X().ModelField().Name("Count"),
                                                   Html.X().ModelField().Name("Sum")
                                               )
                                           )
                                           .Proxy(Html.X().AjaxProxy()
                                                .Url(Url.Action("GetData", "Bar", new { area = "Report" }))
                                                .Reader(Html.X().JsonReader().Root("data"))
                                           )
                                          .Listeners(le => le.Load.Handler = "App.chrtSellCommodity.setWidth(170 * records.length)")
                            )
                            .Axes(
                                Html.X().NumericAxis()
                                    .Position(Position.Left)
                                    .Fields("Count")
                                    .Grid(true)
                                    .Minimum(0)
                                    .Label(Html.X().AxisLabel()
                                        .Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0,0');")
                                    ),
                                Html.X().CategoryAxis()
                                    .Position(Position.Bottom)
                                    .Fields("Name")
                            )
                            .Series(Html.X().ColumnSeries()
                                .Axis(Position.Left)
                                .Highlight(true)
                                .XField("Name")
                                .YField("Count")
                                .Tips(Html.X().ChartTip()
                                    .TrackMouse(true)
                                    .Width(140)
                                    .Height(28)
                                    .Renderer(r => r.Handler = "this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Count') + ' views');")
                                )
                            )
                    )

I hope that my solving helps others developers.

[Daniil]

Thank you for sharing the solution! Appreciated.