way to make graph axes cross at (0,0)

[David]

Is there any way I can make attached graph axes cross at (0,0)? The left most point is 299, the right most is 292, so there is a little change over these 5 years, but the graphic looked like graph is going off a cliff

Here is my current setup

 

  <telerik:RadHtmlChart ID="rhcWages" runat="server"
                                         Width="225px" Height="200px"
                                         Transitions="false">
                       <ChartTitle Text="">
                            <Appearance Align="Center" Position="Top" Visible="false">
                                <TextStyle Bold="true" />
                            </Appearance>
                        </ChartTitle>
                        <Legend>
                            <Appearance Position="Bottom" Visible="false" OffsetX="5" OffsetY="5"></Appearance>
                        </Legend>
                        <PlotArea>
                            <Series/>
                            <Appearance>
                                <FillStyle BackgroundColor="Transparent"></FillStyle>
                            </Appearance>
                            <XAxis AxisCrossingValue="0" Color="black" MajorTickType="None" MinorTickType="None" Reversed="false" >                 
                                <MajorGridLines  Visible="false"/>
                                <MinorGridLines Visible="false"/>  
                                <LabelsAppearance Visible="false" RotationAngle="0" Skip="0" Step="1">
                                </LabelsAppearance>
                                <TitleAppearance Position="Center" RotationAngle="0"
                                                 Visible="false" Text="Year">
                                   <TextStyle Bold="true"/>
                                </TitleAppearance>
                          </XAxis>
                            <YAxis MajorTickType="None" MinorTickType="None" AxisCrossingValue="0">
                                <MajorGridLines  Visible="false"/>
                                <MinorGridLines Visible="false"/>  
                                <LabelsAppearance Visible="false" RotationAngle="0" Skip="0" Step="1" DataFormatString="{0:N0}" >
                                </LabelsAppearance>
                                <TitleAppearance Visible="false" Position="Center" RotationAngle="0" Text="% Change">
                                    <TextStyle Padding="8" Margin="8" Bold="true"/>
                                </TitleAppearance>   
                          </YAxis>
                        </PlotArea>
                        <Appearance>
                            <FillStyle BackgroundColor="Transparent"></FillStyle>
                        </Appearance>                       
                    </telerik:RadHtmlChart>

Please suggest

[Marin Bratanov]

Hi David,

I am not sure I understand the goal and the issue. The provided code will have the axes cross at (0,0), so if all your data points are positive you will get similar appearance to the attached screenshot.

 

<telerik:RadHtmlChart ID="rhcWages" runat="server"
    Width="225px" Height="200px"
    Transitions="false">
    <ChartTitle Text="">
        <Appearance Align="Center" Position="Top" Visible="false">
            <TextStyle Bold="true" />
        </Appearance>
    </ChartTitle>
    <Legend>
        <Appearance Position="Bottom" Visible="false" OffsetX="5" OffsetY="5"></Appearance>
    </Legend>
    <PlotArea>
        <Series>
            <telerik:ScatterLineSeries>
                <SeriesItems>
                    <telerik:ScatterSeriesItem X="292" Y="100"  />
                    <telerik:ScatterSeriesItem X="294" Y="90"  />
                    <telerik:ScatterSeriesItem X="296" Y="80"  />
                    <telerik:ScatterSeriesItem X="298" Y="75"  />
                    <telerik:ScatterSeriesItem X="299" Y="70"  />
                </SeriesItems>
            </telerik:ScatterLineSeries>
        </Series>
        <Appearance>
            <FillStyle BackgroundColor="Transparent"></FillStyle>
        </Appearance>
        <XAxis AxisCrossingValue="0" Color="black" MajorTickType="None" MinorTickType="None" Reversed="false">
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
            <LabelsAppearance Visible="false" RotationAngle="0" Skip="0" Step="1">
            </LabelsAppearance>
            <TitleAppearance Position="Center" RotationAngle="0"
                Visible="false" Text="Year">
                <TextStyle Bold="true" />
            </TitleAppearance>
        </XAxis>
        <YAxis MajorTickType="None" MinorTickType="None" AxisCrossingValue="0">
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
            <LabelsAppearance Visible="false" RotationAngle="0" Skip="0" Step="1" DataFormatString="{0:N0}">
            </LabelsAppearance>
            <TitleAppearance Visible="false" Position="Center" RotationAngle="0" Text="% Change">
                <TextStyle Padding="8" Margin="8" Bold="true" />
            </TitleAppearance>
        </YAxis>
    </PlotArea>
    <Appearance>
        <FillStyle BackgroundColor="Transparent"></FillStyle>
    </Appearance>
</telerik:RadHtmlChart>

 

If, however, the delta between the data points is way less than the min values, you will need to use the MinValue of the axes to have them start closer to the data points. The MinValue and the Step value will have to match your data points spread. For example:

<telerik:RadHtmlChart ID="rhcWages" runat="server"
    Width="225px" Height="200px"
    Transitions="false">
    <ChartTitle Text="">
        <Appearance Align="Center" Position="Top" Visible="false">
            <TextStyle Bold="true" />
        </Appearance>
    </ChartTitle>
    <Legend>
        <Appearance Position="Bottom" Visible="false" OffsetX="5" OffsetY="5"></Appearance>
    </Legend>
    <PlotArea>
        <Series>
            <telerik:ScatterLineSeries>
                <SeriesItems>
                    <telerik:ScatterSeriesItem X="292" Y="100"  />
                    <telerik:ScatterSeriesItem X="294" Y="90"  />
                    <telerik:ScatterSeriesItem X="296" Y="80"  />
                    <telerik:ScatterSeriesItem X="298" Y="75"  />
                    <telerik:ScatterSeriesItem X="299" Y="70"  />
                </SeriesItems>
            </telerik:ScatterLineSeries>
        </Series>
        <Appearance>
            <FillStyle BackgroundColor="Transparent"></FillStyle>
        </Appearance>
        <XAxis AxisCrossingValue="0" Color="black" MajorTickType="None" MinorTickType="None" Reversed="false" MinValue="290" Step="20">
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
            <LabelsAppearance Visible="false" RotationAngle="0" Skip="0" Step="1">
            </LabelsAppearance>
            <TitleAppearance Position="Center" RotationAngle="0"
                Visible="false" Text="Year">
                <TextStyle Bold="true" />
            </TitleAppearance>
        </XAxis>
        <YAxis MajorTickType="None" MinorTickType="None" AxisCrossingValue="0" MinValue="50">
            <MajorGridLines Visible="false" />
            <MinorGridLines Visible="false" />
            <LabelsAppearance Visible="false" RotationAngle="0" Skip="0" Step="1" DataFormatString="{0:N0}">
            </LabelsAppearance>
            <TitleAppearance Visible="false" Position="Center" RotationAngle="0" Text="% Change">
                <TextStyle Padding="8" Margin="8" Bold="true" />
            </TitleAppearance>
        </YAxis>
    </PlotArea>
    <Appearance>
        <FillStyle BackgroundColor="Transparent"></FillStyle>
    </Appearance>
</telerik:RadHtmlChart>

Regards,

Marin Bratanov
Telerik by Progress

[David]

To illustrate my point i added two graphs

<telerik:LineSeries>
                <SeriesItems>
                   <telerik:CategorySeriesItem Y="290" />
                   <telerik:CategorySeriesItem Y="291" />
                   <telerik:CategorySeriesItem Y="292" />
                   <telerik:CategorySeriesItem Y="293" />
                   <telerik:CategorySeriesItem Y="260" />
                </SeriesItems>
            </telerik:LineSeries>

and same graph with additiona "0" point

 <telerik:LineSeries>
                <SeriesItems>
                   <telerik:CategorySeriesItem Y="0" />
                   <telerik:CategorySeriesItem Y="290" />
                   <telerik:CategorySeriesItem Y="291" />
                   <telerik:CategorySeriesItem Y="292" />
                   <telerik:CategorySeriesItem Y="293" />
                   <telerik:CategorySeriesItem Y="260" />
                </SeriesItems>
            </telerik:LineSeries>

As you can see from attached picture trajectory of the second graph is much more "truthful". Meaning there no precipitous drop at 260. I would like to replicate second graph trajectory without adding 0 point

 

 

 

[Marin Bratanov]

Hi David,

As I said before, you need to set the MinValue of the YAxis to get the desired range of values and with it, the desired curve. For example:

<YAxis MajorTickType="None" MinorTickType="None" AxisCrossingValue="0" MinValue="100">

You can then look into implementing this in a smarter way according to your requirements, if the built-in scale logic does not fit your needs. For example, you can evaluate the data source on the server, find the min, max and delta, and then set the MinValue of the axis accordingly (e.g., to be half of the minimum value found in the data).

Regards,

Marin Bratanov
Telerik by Progress

[David]

Hi Marin,

     That helped.

  Thank you

David