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

Add space in the middle of chart title

7 Answers 130 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Iron
Iron
Veteran
David asked on 14 Oct 2015, 02:58 PM

​I tried: chrtBenefitCost.ChartTitle.Text = "Traveler Benefit/Cost Ratio​                                                              Total Societal Benefit/Cost Ratio"

as result i got: Traveler Benefit/Cost Ratio​Total Societal Benefit/Cost Ratio

I tried to   but it resulted in strange format

Any suggestions?

 

7 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 19 Oct 2015, 06:30 AM
Hi David,

To preserve the whitespaces you can use the following CSS:

CSS:
<style>
    .RadHtmlChart SVG text {
        white-space: pre;
    }
</style>

ASPX:
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600" Height="400">
    <ChartTitle Text="aaa          bbb">
    </ChartTitle>
</telerik:RadHtmlChart>


Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 19 Oct 2015, 01:33 PM

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>
                

0
Danail Vasilev
Telerik team
answered on 22 Oct 2015, 10:10 AM
Hi David,

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

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

<style>
    .RadHtmlChart SVG text {
        white-space: pre;
    }
</style>

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

function pageLoad() {
     
    $telerik.$("svg text:contains('aa')")[0].setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve");
}

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 22 Oct 2015, 12:27 PM

&#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.##")

0
Danail Vasilev
Telerik team
answered on 27 Oct 2015, 11:50 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 27 Oct 2015, 12:16 PM
Understood. Thank you
0
Danail Vasilev
Telerik team
answered on 11 Feb 2016, 02:17 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart (HTML5)
Asked by
David
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Danail Vasilev
Telerik team
David
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or