We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

ColumnChart Visibility

Hi syncfusion team,

I have slightly modified the demo example "ColumnChart":

<div class="control-section" align='center' style="visibility: collapse; height:0px;">

    <SfChart Title="Olympic Medal Counts - RIO" Width="@Width" Theme="@Theme">

        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">

            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

        </ChartPrimaryXAxis>

        <ChartPrimaryYAxis Title="Medal Count" Maximum="50" Interval="10">

            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

        </ChartPrimaryYAxis>

        <ChartSeriesCollection>

            <ChartSeries TooltipMappingName="MappingName" DataSource="@ChartPoints" XName="Country" YName="GoldMedal" Name="Gold" ColumnSpacing="0.1" Type="ChartSeriesType.Column">

                <ChartMarker>

                    <ChartDataLabel Visible="false" Position="LabelPosition.Top">

                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>

                    </ChartDataLabel>

                </ChartMarker>

            </ChartSeries>

            <ChartSeries TooltipMappingName="MappingName" DataSource="@ChartPoints" XName="Country" YName="SilverMedal" Name="Silver" ColumnSpacing="0.1" Type="ChartSeriesType.Column">

                <ChartMarker>

                    <ChartDataLabel Visible="false" Position="LabelPosition.Top">

                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>

                    </ChartDataLabel>

                </ChartMarker>

            </ChartSeries>

            <ChartSeries TooltipMappingName="MappingName" DataSource="@ChartPoints" XName="Country" YName="BronzeMedal" Name="Bronze" ColumnSpacing="0.1" Type="ChartSeriesType.Column">

                <ChartMarker>

                    <ChartDataLabel Visible="false" Position="LabelPosition.Top">

                        <ChartDataLabelFont FontWeight="600" Color="#ffffff"></ChartDataLabelFont>

                    </ChartDataLabel>

                </ChartMarker>

            </ChartSeries>

        </ChartSeriesCollection>

        <ChartLegendSettings Visible="true" EnableHighlight="true"></ChartLegendSettings>

        <ChartTooltipSettings Header="<b>${point.tooltip}</b>" Enable="true" Shared="true"></ChartTooltipSettings>

    </SfChart>

</div>

So I would expect the chart not to be visible, but the result is:

ColumnChart.PNG

In the case of other types of charts such as StepArea, the output is correct.

Thanks in advance

Gisela




6 Replies

SG Suganya Gopinath Syncfusion Team October 26, 2022 09:40 AM

Hi Gisela,


Greetings from Syncfusion.


We have ensured your reported scenario with attached code snippet. Chart is not visible when height is specified as 0px. We have attached the tested sample and screenshot for your reference.



Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ColumnHeight-1146750297.zip


If you are still facing problem, please try to replicate an issue in above sample or share us issue reproduced sample so that it will be helpful to proceed further.


Regards,

Durga Gopalakrishnan.



GI gisela October 28, 2022 05:21 AM

Hi Durga,


Thanks for your sample project, here is the chart layout as expected.

You can reproduce the error by adding the specified style for the "Column" ChartType of the Syncfusion Sample Demo project  (BlazorServerDemos_NET6):

ColumnChart_code3.PNG


You will then get the following output:

ColumnChart.PNG


Thank's in advance

Gisela



SB Swetha Babu Syncfusion Team October 31, 2022 07:39 AM

Hi Gisela,


In the demo sample, we have set the minimum height as 350px for the control section. So, the reported scenario occurs in our demo sample. But if we tried to reproduce this in our sample, we are unable to replicate the same. Please modify the standalone sample to replicate the reported scenario based on your requirement. It will be helpful for us to analyze further and assist you better.



Regards,

Swetha



GI gisela October 31, 2022 10:58 AM

Hi Swetha,

I've now attached your demo project with a few modifications (the chart embedded in a div element with class=row).

In my development project I have several  controls (created dynamically)  embedded in rows, that are shown or hidden depending on buttons.


Thanks in advance

Gisela



Attachment: ColumnHeight1146750297_1b06cf.zip


DG Durga Gopalakrishnan Syncfusion Team November 1, 2022 09:13 AM

Hi Gisela,


We have considered your reported scenario as bug and logged a defect report for this issue. This fix will be available in our weekly patch release which is scheduled to be rolled out on 15th November 2022. We appreciate your patience until then. You can keep track of the bug from the below feedback link.


Feedback Link : https://www.syncfusion.com/feedback/38791/column-chart-is-not-hidden-when-css-height-is-0px


If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.


Regards,

Durga Gopalakrishnan.



DG Durga Gopalakrishnan Syncfusion Team November 16, 2022 08:55 AM

Hi Gisela,


Thanks for being patience. We have resolved the reported problem in sample level itself. Please check with the below snippet. We have attached modified sample for your reference.


<div class="row" style="visibility: collapse; height:0px;">

@if (ChartPoints != null)

{

    <div class="control-section" align='center' style="visibility:inherit;height:inherit">

        <SfChart></SfChart>

    </div>

}

</div>


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ColumnVisbility-937365134.zip


Kindly revert us if you have any other concerns.


Regards,

Durga Gopalakrishnan.


Loader.
Live Chat Icon For mobile
Up arrow icon