Stacked Bar Chart - Remove all GridLines

1 Answer 62 Views
Charts
Becca
Top achievements
Rank 1
Becca asked on 10 May 2021, 08:31 AM

Hi 

I am trying to recreate the design below using stacked bar charts, I want to remove all gridlines.   The red boxes are not part of the design but rather confidential info.

As you can see I have been able to remove all the gridlines and values I don't want but the vertical ones.

Here is my code,  just playing at the moment. 

  <TelerikChart Width="100%" Height="10%">
                                <ChartSeriesItems>
                                    <ChartSeries Type="ChartSeriesType.Bar" Name="Product 1" Data="@series1Data">
                                        <ChartSeriesStack Group="myStack" Type="Telerik.Blazor.ChartSeriesStackType.Stack100"></ChartSeriesStack>
                                    </ChartSeries>

                                    <ChartSeries Type="ChartSeriesType.Bar" Name="Product 2" Data="@series2Data">
                                        <ChartSeriesStack Group="myStack"></ChartSeriesStack>
                                    </ChartSeries>

                                </ChartSeriesItems>

                                <ChartCategoryAxes>
                                    <ChartCategoryAxis>
                                        <ChartCategoryAxisMajorGridLines Visible="false" />
                                    </ChartCategoryAxis>
                                </ChartCategoryAxes>

                              <ChartValueAxes>
                                    <ChartValueAxis>
                                        <ChartValueAxes>
                                            <ChartValueAxis Visible="false" />
                                        </ChartValueAxes>
                                    </ChartValueAxis>
                                </ChartValueAxes>
                           

                                <ChartLegend Visible="false">
                                </ChartLegend>



                            </TelerikChart>

I have tried hiding major and minor gridlines,  in the Y, X, and value Axis to no avail. 

I would be so grateful if someone could point me in the right direction.

 

Thank you 

Becca

 

1 Answer, 1 is accepted

Sort by
0
Svetoslav Dimitrov
Telerik team
answered on 12 May 2021, 04:20 PM

Hello Becca,

To remove all the Grid lines from the Chart you should remove both the MajorGridLines, as you did, and the MinorGridLines, together with the Major and MinorTicks for both axes. The code snippet below illustrates the concept:

<TelerikChart Width="100%" Height="10%">
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Bar" Name="Product 1" Data="@series1Data">
            <ChartSeriesStack Group="myStack" Type="Telerik.Blazor.ChartSeriesStackType.Stack100"></ChartSeriesStack>
        </ChartSeries>

        <ChartSeries Type="ChartSeriesType.Bar" Name="Product 2" Data="@series2Data">
            <ChartSeriesStack Group="myStack"></ChartSeriesStack>
        </ChartSeries>
    </ChartSeriesItems>
    <ChartCategoryAxes>
        <ChartCategoryAxis>
            <ChartCategoryAxisMajorGridLines Visible="false" />
            <ChartCategoryAxisMinorGridLines Visible="false" />
            <ChartCategoryAxisMajorTicks Visible="false" />
            <ChartCategoryAxisMinorTicks Visible="false" />
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartValueAxes>
        <ChartValueAxis Visible="false">
            <ChartValueAxisMajorGridLines Visible="false" />
            <ChartValueAxisMinorGridLines Visible="false" />
            <ChartValueAxisMajorTicks Visible="false" />
            <ChartValueAxisMinorTicks Visible="false" />
        </ChartValueAxis>
    </ChartValueAxes>
    <ChartLegend Visible="false">
    </ChartLegend>
</TelerikChart>

@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
} 

Regards,
Svetoslav Dimitrov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Becca
Top achievements
Rank 1
commented on 13 May 2021, 07:59 AM

Thank you very much, i will give it a go!
Svetoslav Dimitrov
Telerik team
commented on 14 May 2021, 10:28 AM

Hello Becca,

sure, you can take your time, if another question emerges let me know!

 

Regards,

Svetolsav Dimitrov

Tags
Charts
Asked by
Becca
Top achievements
Rank 1
Answers by
Svetoslav Dimitrov
Telerik team
Share this question
or