Bar chart customization

[Fabio]

Hi, I realized the 2 bar chart in a single mvc5/bootstrap page as shown in the image "actual.jpg" (see the code) I would like to obtain the result in "wanted.jpg" in short an overlapping bar chart and changing categories colors, there is a way to do this?

Thank You in advance.

code:
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">
            @(Html.Kendo().Chart()
                                    .Name("chart-multi")
                                    .Title("First")
                                    .Legend(legend => legend
                                        .Position(ChartLegendPosition.Top)
                                    )
                                    .Series(series =>
                                    {
                                        series
                                            .Column(new int[] { 20, 40, 45, 30, 50 })
                                            .Color("#cc6e38")
                                            .Spacing(-1)
                                            .Name("on battery");
                                        series
                                            .Column(new int[] { 20, 30, 35, 35, 40 })
                                            .Color("#ef955f")
                                            .Name("on gas");
                                    })
                                    .CategoryAxis(axis => axis
                                        .Categories("Mon", "Tue", "Wed", "Thu", "Fri")
                                        .AxisCrossingValue(0, 10)
                                    )
                                    .ValueAxis(axis => axis
                                        .Numeric()
                                            .Title("miles")
                                            .Min(0).Max(100)
                                    )
                                    .ValueAxis(axis => axis
                                        .Numeric("km")
                                            .Title("km")
                                            .Min(0).Max(161).MajorUnit(32)
                                    )
            )
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">
            @(Html.Kendo().Chart()
                                        .Name("bar-chart")
                                        .Title("Second")
                                        .Series(series =>
                                        {
                                            series.RangeColumn(new double[][] {
                                                               new double[] {0, 121.99},
                                                               new double[] {38.47, 121.99},
                                                               new double[] {16.17, 38.47},
                                                               new double[] {0, 16.17}
                                            }).Labels(labels => labels
                                                .Visible(true)
                                                .From(from => from.Template("#=value.from#"))
                                                .To(to => to.Template("#=value.to#")));
                                        })
                                        .CategoryAxis(axis => axis
                                            .Categories("Total", "Done", "Committed", "Uncommitted")
                                        )
                                        .Tooltip(tooltip => tooltip
                                            .Visible(true)
                                            .Template("#= value.to - value.from #")
                                        )
            )
        </div>
    </div>
</div>

[Tsvetina]

Hello Fabrizio,

I see you already used the Spacing setting to put columns one on top of the others, so you just need to make the top column narrower. This can be achieved with a custom visual. But also, to have a look like the on in the image, you would need to switch the two series order:

@(Html.Kendo().Chart()
    .Name("chart-multi")
    .Title("First")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
    )
    .Series(series =>
    {
        series
            .Column(new int[] { 20, 30, 35, 35, 40 })
            .Color("#ef955f")
            .Name("on gas")
            .Spacing(-1);
        series
            .Column(new int[] { 20, 40, 45, 30, 50 })
            .Color("#cc6e38")
            .Name("on battery")
            .Visual("customVisual");
    })
    .CategoryAxis(axis => axis
        .Categories("Mon", "Tue", "Wed", "Thu", "Fri")
        .AxisCrossingValue(0, 10)
    )
    .ValueAxis(axis => axis
        .Numeric()
            .Title("miles")
            .Min(0).Max(100)
    )
    .ValueAxis(axis => axis
        .Numeric("km")
            .Title("km")
            .Min(0).Max(161).MajorUnit(32)
    )
)

<script>
    function customVisual(e) {
        var origin = e.rect.origin;
        var center = e.rect.center();
        var bottomRight = e.rect.bottomRight();


        var gradient = new kendo.drawing.LinearGradient({
            start: [0, 1],
            end: [1, 1],
            stops: [{
                offset: 0,
                color: "#cc6e38",
                opacity: 1
            }, {
                offset: 0.25,
                color: "#db9973",
                opacity: 1
            }, {
                offset: 1,
                color: "#cc6e38",
                opacity: 1
            }]
        });
        var offset = (bottomRight.x - origin.x) / 4;
        var path = new kendo.drawing.Path({
            fill: gradient,
            stroke: {
                color: "#939393",
                width: 0.5
            }
        })
        .moveTo(origin.x + offset, bottomRight.y)
        .lineTo(bottomRight.x - offset, bottomRight.y)
        .lineTo(bottomRight.x - offset, origin.y)
        .lineTo(origin.x + offset, origin.y)
        .close();

        return path;
    }
</script>

With regard to coloring the second Chart series, there are a few ways to do this, depending on where the colors come from. If they come from a static array with colors, you could try something like this:

@(Html.Kendo().Chart()
     .Name("bar-chart")
     .Title("Second")
     .Series(series =>
     {
         series.RangeColumn(new double[][] {
                            new double[] {0, 121.99},
                            new double[] {38.47, 121.99},
                            new double[] {16.17, 38.47},
                            new double[] {0, 16.17}
         })
         .ColorHandler("getColor")
         .Labels(labels => labels
             .Visible(true)
             .From(from => from.Template("#=value.from#"))
             .To(to => to.Template("#=value.to#")));
     })
     .CategoryAxis(axis => axis
         .Categories("Total", "Done", "Committed", "Uncommitted")
     )
     .Tooltip(tooltip => tooltip
         .Visible(true)
         .Template("#= value.to - value.from #")
     )
)

<script>
    var colors = ["orange", "gold", "limegreen", "lightskyblue"];
    function getColor(data) {
        var index = data.index;
        var numColors = colors.length;

        var colorIndex = index % numColors;
        return colors[colorIndex];
    }
</script>

If you are binding the series to actual data items from a DataSource and the color comes with the data, you can set the ColorField property of the RangeColumn series to the field in the DataSource that contains the color name.

Regards,
Tsvetina
Progress Telerik

[Fabio]

Thank You for the info, exactly what I needed.

There is a tutorial or some documentation that focus on custom visual?

 

Thanks again

[Alex Hajigeorgieva]

Hello, Fabrizio,

I am pleased to hear that my colleague Tsvetina was helpful to you.

We have a custom visual example in the official demos at:

Bar Charts
Line Charts

We also have a folder of how to articles which focus on the appearance of the charts and mostly using the drawing API/custom visuals:

https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/color-coded-bars



Other resources:

Drawing API overview
Drawing API
Drawing functions
Geometry

We can certainly consider adding more resources if you feel that what is available is not enough. Let me know what you think.

Regards,
Alex Hajigeorgieva
Progress Telerik