Column chart styling customisation

[Taras Kolodchyn]

Hi all .. 

I want to styling  chat control like this .

https://drive.google.com/file/d/1dCx8qcOBS_m1SAedC2SNTaQLw7CoRJKg/view?usp=sharing

so, the my chat looks  

https://drive.google.com/file/d/1z64_wlv2yT9MsHkg3O4bRq7srVtk3N5-/view?usp=sharing

Can someone help with customisation ?

[Durga Gopalakrishnan]

Hi Taras, 

We are preparing sample based on your requirement. We will update the sample within one business day(17^th June, 2020). We appreciate your patience until then. 

Regards, 

Durga G 

[Durga Gopalakrishnan]

Hi Taras, 

 

We have prepared sample based on your requirement. We have used chart type as column, specified rounded corner values for rectangle, placed x axis labels inside axis line. Please check with the below sample and screenshot. 

 

Screenshot 

 

 

 

Sample 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomColumn-1957467110.zip 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Durga G 

[Taras Kolodchyn]

Hi Durga,  

thanks for you example ..

so the my code   

   <SfChart Title="@chartData.Title">

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

            <ChartPrimaryXAxis Title="Name / Identifler" CrossesAt="0"

                               LabelPosition="AxisPosition.Inside"

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

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

                <ChartAxisLabelStyle Color="#7C8594" Size="12"></ChartAxisLabelStyle>

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

            </ChartPrimaryXAxis>

            <ChartPrimaryYAxis Title="Share" IsIndexed="true" LabelFormat="{value}%">

                <ChartAxisLabelStyle Color="#7C8594" Size="12"></ChartAxisLabelStyle>

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

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

            </ChartPrimaryYAxis>

            <ChartSeriesCollection>

                <ChartSeries DataSource="@data" XName="AttributeType" YName="Value" Fill="#009E8B" Type="ChartSeriesType.Column" PointColorMapping="Color">

                    <ChartCornerRadius TopLeft="8" TopRight="8" BottomLeft="8" BottomRight="8"></ChartCornerRadius>

                    <ChartMarker>

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

                            <ChartDataLabelFont FontWeight="600" Size="12" Color="#DFE6EC"></ChartDataLabelFont>

                        </ChartDataLabel>

                    </ChartMarker>

                </ChartSeries>

            </ChartSeriesCollection>

            <ChartTooltipSettings Enable="true"

                                 Format="${point.x}<br/>${point.y}"></ChartTooltipSettings>

            <ChartLegendSettings Visible="false"></ChartLegendSettings>

        </SfChart>

https://drive.google.com/file/d/1Flyrx4SY9Ss1qMEd0d2zavCVY2vDpiVU/view?usp=sharing

so , I want to customize the ToolTip fill color and tooltip font style and size and color.

 I want to customise the chart title - font, color and,size.

the same I need the XAxis title and YAxis  and the position as the 2.png file.

[Durga Gopalakrishnan]

Hi Taras, 

 

We have analyzed your queries. We suggest you to use ChartTitleStyle to customize title style, ChartAxisTitleStyle to customize axis titles and ChartTooltipTextStyle to customize tooltip text. We have modified sample and attached for your reference. Please check with the below code snippet and sample. 

 

Code Snippet 

 

<SfChart Title="Trade in Food Groups"> 

        <ChartTitleStyle Color="red" FontStyle="oblique" Size="18px"></ChartTitleStyle> 

        <ChartPrimaryXAxis Title="Name"> 

            <ChartAxisTitleStyle Color="blue" FontStyle="italic" Size="16px"></ChartAxisTitleStyle> 

        </ChartPrimaryXAxis> 

        <ChartPrimaryYAxis Title="Value"> 

            <ChartAxisTitleStyle Color="blue" FontStyle="italic" Size="16px"></ChartAxisTitleStyle> 

        </ChartPrimaryYAxis> 

        <ChartTooltipSettings Fill="white" Enable="true" Format="${point.x}<br/>${point.y}"> 

            <ChartTooltipTextStyle Color="grey" Size="12px" FontStyle="oblique"></ChartTooltipTextStyle> 

        </ChartTooltipSettings> 

   </SfChart> 

 

Screenshot 

 

Sample 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextStyle-1411740722.zip 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Durga G 

[Taras Kolodchyn]

Hi Durga, 

thanks for your help. 

I try to use Text Alignment and for SfChart Title its  works but for ChartAxisTitleStyle its not , can you help with this ?

        <SfChart Title="@chartData.Title" EnableAnimation="true">

            <ChartTitleStyle Color="black" FontStyle="arial" Size="18px" TextAlignment="Syncfusion.Blazor.Charts.Alignment.Near"></ChartTitleStyle>

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

            <ChartPrimaryXAxis Title="Name / Identifler" CrossesAt="0"

                               LabelPosition="AxisPosition.Inside"

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

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

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

                <ChartAxisTitleStyle Color="#2B2F31" FontStyle="arial" Size="13px" TextAlignment="Syncfusion.Blazor.Charts.Alignment.Far"></ChartAxisTitleStyle>

                <ChartAxisLabelStyle Color="#7C8594" Size="12"></ChartAxisLabelStyle>

            </ChartPrimaryXAxis>

            <ChartPrimaryYAxis Title="Share" IsIndexed="true" LabelFormat="{value}%">

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

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

                <ChartAxisTitleStyle Color="#2B2F31" FontStyle="arial" Size="13px"></ChartAxisTitleStyle>

                <ChartAxisLabelStyle Color="#7C8594" FontStyle="arial" Size="12"></ChartAxisLabelStyle>

            </ChartPrimaryYAxis>

            <ChartSeriesCollection>

                <ChartSeries DataSource="@data" XName="AttributeType" YName="Value" Fill="#009E8B" Type="ChartSeriesType.Column" PointColorMapping="Color">

                    <ChartCornerRadius TopLeft="8" TopRight="8" BottomLeft="8" BottomRight="8"></ChartCornerRadius>

                    <ChartMarker>

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

                            <ChartDataLabelFont FontWeight="600" Size="12" Color="#DFE6EC"></ChartDataLabelFont>

                        </ChartDataLabel>

                    </ChartMarker>

                </ChartSeries>

            </ChartSeriesCollection>

            <ChartTooltipSettings Enable="true" Fill="white"

                                  Format="${point.x}<br/><b>${point.y}</b>">

                <ChartTooltipTextStyle Color="grey" Size="12px" FontStyle="arial"></ChartTooltipTextStyle>

            </ChartTooltipSettings>

            <ChartLegendSettings Visible="false"></ChartLegendSettings>

        </SfChart>

[Durga Gopalakrishnan]

Hi Taras, 

We have validated your reported scenario. As of now, we don’t have support for axis title alignment. We have logged a feature request on this. Based on other logged tasks priority, this feature will be included in any of our upcoming release. You can keep track of the feature from the feedback portal below.  

  

Feedback Link : https://www.syncfusion.com/feedback/15473/ 

 

If you have any more specifications or suggestions to the feature request, you can add it as a comment in the portal. 

Kindly revert us, if you have any concerns. 

Regards, 

Durga G