This is a migrated thread and some comments may be shown as answers.

Stacked Column series border and styles

8 Answers 282 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
MBEN
Top achievements
Rank 2
Veteran
MBEN asked on 03 Jun 2020, 10:19 PM

Hi,

We are using a stacked column series for our chart display. We have a single stacked bar in display (as attached). I am trying to add a border to each stack/column but I couldn't find an attribute I can use. I tried the approach defined here but that didn't seem to work.

https://feedback.telerik.com/aspnet-ajax/1373488-add-appearance-options-for-the-series-border-in-radhtmlchart

Another thing that I am having to struggle with is I have the chart title visible set to false but there is a white space in that area that I can't seem to get rid of. Is there somewhere in css i can do that?

Attached is the expected and what I see right now. I gave the chart a black background to show what I mean.

Can you help me figure this out?

 

 

 

8 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 08 Jun 2020, 03:00 PM

Hi,

The border for the chart series indeed has to be set through its udnerlying Kendo UI widget like found by you. There are just some changes that has to be made in order to use the linked approach for a stacked-chart scenario. For exampl:

        <script>
            function onLoad(chart) {
                var chartWidget = chart.get_kendoWidget();
                chartWidget.options.seriesDefaults.border = {
                    width: 5,
                    color: "black",
                    dashType: "solid",
                    opacity: 0.5
                }
                //or series[0] if you want to set the border to specific series
                //chartWidget.options.series[0].border = {
                //    width: 5,
                //    color: "black",
                //    dashType: "dash",
                //    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>

 

Regards,
Vessy
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
MBEN
Top achievements
Rank 2
Veteran
answered on 08 Jun 2020, 04:56 PM

Thanks, that worked.

Could you also point me to how I could get rid of the white space (the black space above the gray box in the attached current.png)? I believe that is the space assigned for the chart title.

Secondly, I needed to show lines in the gray box (as shown in the expected.png). Is there a way I could achieve that, by maybe having a background image?

 

0
Vessy
Telerik team
answered on 10 Jun 2020, 02:44 PM

Hi,

I will need a little more details in order to be able to tell where the black space is coming from. You can try to remove it by decreasing the MaxValue of the YAxis or by setting the ColumnSeries StackType="Stack100".

If not of that helps, please, send me the chart setup that you have so I will be able to provide you more to the point answer.

Regards,
Vessy
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
MBEN
Top achievements
Rank 2
Veteran
answered on 15 Jun 2020, 04:53 PM

Thank You, setting StackType="Stack100" worked.

Lastly, Can I use a background image for the stack? I want to be able to show stripes in the chart as shown in the attached.

0
MBEN
Top achievements
Rank 2
Veteran
answered on 17 Jun 2020, 08:58 PM

Hi,

Any update on how to use a background image or a background css so I can show the stripes in one of the series?

0
Vessy
Telerik team
answered on 18 Jun 2020, 03:32 PM

Hi,

I am afraid that I will have to disappoint you, but the chart does not provide an option for setting images as background for its items at the moment. If you wish, you can submit a feature request for such in the feedback portal for the underlying Kendo UI widget of the chart here:

https://feedback.telerik.com/kendo-jquery-ui?listMode=Recent&typeId=2&categoryId=884

Regards,
Vessy
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
MBEN
Top achievements
Rank 2
Veteran
answered on 18 Jun 2020, 06:56 PM

Thanks, I submitted a request.

If not a background image, as long as I can set a background using css, that might work as well. But right now I couldn't do that either.

0
Vessy
Telerik team
answered on 19 Jun 2020, 02:36 PM

Hi,

Thanks a lot for the submitted feature request. The html chart is rendered via SVG elements and, unfortunately, styling them through CSS is not possible.

In addition, I have also updated your Telerik points as a small token of gratitude for your suggestions.

Regards,
Vessy
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Chart (HTML5)
Asked by
MBEN
Top achievements
Rank 2
Veteran
Answers by
Vessy
Telerik team
MBEN
Top achievements
Rank 2
Veteran
Share this question
or