Add space in the middle of chart title

Hi David,

To preserve the whitespaces you can use the following CSS:

CSS:

ASPX:


Regards,
Danail Vasilev
Telerik

Hi Danail,

   That didn't work for me unfortunately. Here is my code:

 

   <telerik:RadHtmlChart runat="server" ID="chrtBenefitCost"  
                                          Width="1100" Height="585" Transitions="true" Skin="Silk">
                        <ClientEvents OnSeriesClick="OnSeriesClick_BenefitCostGraph"/>
                        <ChartTitle Text="aaa          bbb">
                                <Appearance Align="Center" BackgroundColor="Transparent" Position="Top">
                                    <TextStyle Bold="false" Margin="0 0 11 0"/>
                                </Appearance>
                        </ChartTitle>
                        <PlotArea>
                            <Series>   
                              <telerik:ColumnSeries Name="Benefits" Stacked="false" Gap="1.5" Spacing="0.4">                                
                                     <LabelsAppearance >
                                        <ClientTemplate>
                                            #=series.name#: #= kendo.format(\'{0:N0}\', value)#  
                                        </ClientTemplate>
                                    </LabelsAppearance>
                                    <TooltipsAppearance>
                                        <ClientTemplate>
                                            Click for Details
                                        </ClientTemplate>
                                    </TooltipsAppearance>
                              </telerik:ColumnSeries>  
                              <telerik:ColumnSeries Name="Costs">
                                    <LabelsAppearance DataFormatString="{0:C0}">
                                     <ClientTemplate>
                                            #=series.name#: #= kendo.format(\'{0:N0}\', value)#  
                                        </ClientTemplate>
                                    </LabelsAppearance>
                                    <TooltipsAppearance>
                                        <ClientTemplate>
                                            Click for Details
                                        </ClientTemplate>
                                    </TooltipsAppearance>
                              </telerik:ColumnSeries>                     
                            </Series>
                            <Appearance>
                                <FillStyle BackgroundColor="Transparent"></FillStyle>
                            </Appearance>
                           <XAxis AxisCrossingValue="0" Color="black" MajorTickType="Outside" MinorTickType="Outside"
                                   Reversed="false">
                                <LabelsAppearance DataFormatString="#=series.name#" RotationAngle="0" Skip="0" Step="1"></LabelsAppearance>
                                <TitleAppearance Position="Center" RotationAngle="0" Text="Quarters">
                                </TitleAppearance>
                            </XAxis>
                            <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="1" MajorTickType="Outside"
                                    MinorTickType="None" Reversed="false">
                                <LabelsAppearance DataFormatString="{0:N0}" RotationAngle="0" Skip="0" Step="1"></LabelsAppearance>
                                <TitleAppearance Position="Center" RotationAngle="0" Text="Millions of Dollars">
                                </TitleAppearance>
                            </YAxis>
                             <XAxis AxisCrossingValue="0" Color="black" MajorTickType="Outside" MinorTickType="Outside"
                               Reversed="false">
                            <Items>
                                <telerik:AxisItem LabelText=""></telerik:AxisItem>
                            </Items>
                            <TitleAppearance Position="Center" RotationAngle="0" Text="Regions" Visible="false">
                            </TitleAppearance>
                        </XAxis>
                        <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="1" MajorTickType="Outside"
                               MinorTickType="None" Reversed="false">
                            <LabelsAppearance DataFormatString="{0:N0}" RotationAngle="0" Skip="0" Step="1"></LabelsAppearance>
                            <TitleAppearance Position="Center" RotationAngle="0" Text="Millions of Dollars">
                               <TextStyle Padding="8" Margin="8" Bold="true"/>
                            </TitleAppearance>
                        </YAxis>
                        </PlotArea>
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent"></FillStyle>
                        </Appearance>                       
                        <Legend>
                            <Appearance BackgroundColor="Transparent" Position="Bottom">
                            </Appearance>
                        </Legend>
                    </telerik:RadHtmlChart>
                
​

Hi David,

I have made a further investigation on the matter and concluded the following:

    - Using white-space: pre style works only in FireFox.


     - Setting an "xml:space","preserve" , works in FireFox and Chrome - http://stackoverflow.com/questions/8424422/adding-text-with-whitespaces-in-svg-text-element


where 'aa' is a text that is contained inside the legend.

     - Using the "&#160;" unicode character works in IE as well - http://stackoverflow.com/questions/27499032/svg-text-element-with-whitespace-not-preserved-in-ie


Regards,
Danail Vasilev
Telerik

&#160; works exactly same as &nbsp;

As i mentioned before it is messes title completely. see attached

 

  chrtBenefitCost.ChartTitle.Text = "&#160;&#160;&#160;&#160;&#160;&#160;Traveler Benefit/Cost Ratio: " & Format(dsBenefitChart.Tables(0).Rows(0)("TravelerBenefits") / dblCosts, "#,###,###,##0.##") & "&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;" & "Total Societal Benefit/Cost Ratio: " & Format(dsBenefitChart.Tables(0).Rows(0)("SocietalBenefits") / dblCosts, "#,###,###,##0.##")

​

Hi David,

You are right, this is an issue with the control. I have reported it to our development team, so that if everything is fine it may be fixed for one of our next releases.

I have also updated your Telerik points for reporting this issue to us.

Regards,
Danail Vasilev
Telerik

Understood. Thank you

Hello David,

This post is to let you know that the issue has been resolved, so that if everything is fine the fix will be available for the upcoming Q1 2016 SP1, scheduled for the end of this month.

Regards,
Danail Vasilev
Telerik