Add space in the middle of chart title

8 posts, 0 answers
  1. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 14 Oct 2015 Link to this post

    ​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?

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 19 Oct 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 19 Oct 2015 in reply to Danail Vasilev Link to this post

    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>
                    

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 22 Oct 2015 Link to this post

    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
  6. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 22 Oct 2015 in reply to Danail Vasilev Link to this post

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

  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 27 Oct 2015 Link to this post

    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
  8. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 27 Oct 2015 in reply to Danail Vasilev Link to this post

    Understood. Thank you
  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 11 Feb Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017