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

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

4 Answers 50 Views

Chart (HTML5)

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

David asked on 25 Apr 2017, 05:57 PM

capture.jpg

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

4 Answers, 1 is accepted

answered on 28 Apr 2017, 03:10 PM

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

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 28 Apr 2017, 05:24 PM

capture.jpg

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

answered on 02 May 2017, 01:44 PM

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

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.