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

Add space in the middle of chart title

7 Answers 158 Views

Chart (HTML5)

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

7 Answers, 1 is accepted

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>

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 " " 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

answered on 22 Oct 2015, 12:27 PM

capture.jpg

  works exactly same as  

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

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