Stacked Bar chart with threshhold/target

[MBEN]

I want to show a target line in my stacked bar chart for one of the series. Is it possible to do so?

[Vessy]

Hi,

the HtmlChart provides a Threshold line functionality which can be used to achieve the described result. Please, examine the following article providing detailed information regarding the different configuration options, so you can choose the one that fits your scenario the best:

https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/how-to/plot-threshold-lines

Regards,
Vessy
Progress Telerik

[MBEN]

Thanks,

Another question, is there a way to put a different border-width/stroke around each side of the stacked chart?

I use the method below but the chart only allows me to put a border around the whole bar and not on individual sides. The border also looks like it's only being applied to 3 sides and the top is being overridden by the chart above it as in the attached image.

chartWidget.options.series[0].border = {
        width: 4,
        color: "#0d0e20",
        dashType: "solid",
        opacity: 2
    }
    chartWidget.options.series[1].border = {
        width: 4,
        color: "#B6B6BC",
        dashType: "solid",
        opacity: 2
    }
    chartWidget.options.series[2].border = {
        width: 4,
        color: "#008ECC",
        dashType: "solid",
        opacity: 2
    }
    chartWidget.options.series[3].border = {
        width: 4,
        color: "#cb8e42",
        dashType: "solid",
        opacity: 2
    }

[Eyup]

Hello,

The top border is missing as the series are stacked, meaning that the top series appears over the previous one. Only the four borders of the top most series will be visible:

        <script>
            function onLoad(chart) {
                var chartWidget = chart.get_kendoWidget();
                //or series[0] if you want to set the border to specific series
                chartWidget.options.series[0].border = {
                    width: 4,
                    color: "#0d0e20",
                    dashType: "solid",
                    opacity: 1
                }
                chartWidget.options.series[1].border = {
                    width: 4,
                    color: "#B6B6BC",
                    dashType: "solid",
                    opacity: 1
                }
                chartWidget.options.series[2].border = {
                    width: 4,
                    color: "#008ECC",
                    dashType: "solid",
                    opacity: 1
                }

                chart.repaint();
            }
        </script>

<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
        <ClientEvents OnLoad="onLoad" />
        <PlotArea>
            <Series>
                <telerik:ColumnSeries Stacked="true">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="30" />
                    </SeriesItems>
                </telerik:ColumnSeries>
                <telerik:ColumnSeries>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="10" />
                    </SeriesItems>
                </telerik:ColumnSeries>
                <telerik:ColumnSeries>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="20" />
                    </SeriesItems>
                </telerik:ColumnSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>

As an alternative, you can implement a series visual, drawing the borders in it, but this will require custom implementation.

 

Regards,
Eyup
Progress Telerik

[MBEN]

is there an example you can point me to?

[Vessy]

Hi,

You can see a possible way to change the height of the bottom series via Visual template as of below. Please, note that this is a very basic sample, so you can feel free to modify it up to a point to fit your scenario the best.

More details about the Kendo UI Drawing library is available here:
https://docs.telerik.com/kendo-ui/framework/drawing/overview

        <script>
            function onLoad(chart) {
                var chartWidget = chart.get_kendoWidget();

                chartWidget.options.seriesDefaults.gap = 1;

                //or series[0] if you want to set the border to specific series
                chartWidget.options.series[0].border = {
                    width: 4,
                    color: "#0d0e20",
                    dashType: "solid",
                    opacity: 1
                }
                chartWidget.options.series[1].border = {
                    width: 4,
                    color: "#B6B6BC",
                    dashType: "solid",
                    opacity: 1
                }
                chartWidget.options.series[2].border = {
                    width: 4,
                    color: "#008ECC",
                    dashType: "solid",
                    opacity: 1
                }

                chart.repaint();
            }
            function seriesVisual(e) {
                var geom = kendo.geometry;
                var draw = kendo.drawing;
                var center = e.rect.center();
                var color = e.options.color;
                var rectGeom = new geom.Rect([e.rect.origin.x, e.rect.origin.y + 4], [e.rect.width(), e.rect.height() - 6]);

                var rect, layout;
                rect = new draw.Rect(rectGeom, {
                    fill: {
                        color: e.options.color
                    },
                    stroke: {
                        width: 4,
                        color: "#0d0e20"
                    }
                })

                layout = new draw.Layout(rect, {});

                layout.append(rect);
                return layout;
            }
        </script>

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
            <ClientEvents OnLoad="onLoad" />
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Stacked="true">
                        <Appearance Visual="seriesVisual"></Appearance>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="30" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="10" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="20" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

 

Regards,
Vessy
Progress Telerik

[MBEN]

Thanks, that helped.

[Vessy]

Hi,

You are welcome - I am glad my suggestion was helpful for you :)

Regards,
Vessy
Progress Telerik