<form id="form1" runat="server"> <div> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> </div> <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="100%" Height="500px" Skin="Metro"> <Legend> <Appearance Position="Bottom"> </Appearance> </Legend> <PlotArea> <AdditionalYAxes> <telerik:AxisY MaxValue="100" MinValue="0" Name="HS" Step="10" Color="#00CC00" > <LabelsAppearance DataFormatString="{0}%"></LabelsAppearance> <MinorGridLines Visible="false"></MinorGridLines> <MajorGridLines Visible="true"></MajorGridLines> </telerik:AxisY> </AdditionalYAxes> <Series> <telerik:ScatterLineSeries DataFieldX="RQ" DataFieldY="RCYL1" Name="RCYL1"> <LabelsAppearance Visible="false"></LabelsAppearance> <Appearance> <FillStyle BackgroundColor="Fuchsia" /> </Appearance> </telerik:ScatterLineSeries> <telerik:ScatterLineSeries DataFieldX="RQ" DataFieldY="RCYL2" Name="RCYL2" > <LabelsAppearance Visible="false"></LabelsAppearance> <Appearance> <FillStyle BackgroundColor="Red" /> </Appearance> </telerik:ScatterLineSeries> <telerik:ScatterLineSeries AxisName="HS" DataFieldX="RQ" DataFieldY="HS" Name="HS"> <LabelsAppearance Visible="false"></LabelsAppearance> <Appearance> <FillStyle BackgroundColor="#00CC00" /> </Appearance> </telerik:ScatterLineSeries> </Series> <XAxis BaseUnit="Days" Type="Date" MajorTickType="None" > <LabelsAppearance DataFormatString="yyyy-MM-dd"> </LabelsAppearance> <MinorGridLines Visible="false"></MinorGridLines> <MajorGridLines Visible="true"></MajorGridLines> <AxisCrossingPoints> <telerik:AxisCrossingPoint Value="0" /> <telerik:AxisCrossingPoint Value="10" /> </AxisCrossingPoints> </XAxis> <YAxis MajorTickType="None"> <MinorGridLines Visible="false"></MinorGridLines> <MajorGridLines Visible="true"></MajorGridLines> <MinorGridLines Visible="false"></MinorGridLines> </YAxis> </PlotArea> </telerik:RadHtmlChart> </form>Telerik.Web.UI (2016.3.914.40)
3 Answers, 1 is accepted
0
Hi,
As you have already found, you need to set the AxisCrossingValue of the x-axis to an array of values that will correspond to the y-axes indexes. You should use values that are large enough considering your data, for example:
<AxisCrossingPoints> <telerik:AxisCrossingPoint Value="0" /> <telerik:AxisCrossingPoint Value="987654321" /></AxisCrossingPoints>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.
0
w l
Top achievements
Rank 1
Rank 1
answered on 08 Mar 2017, 10:32 AM
I use the way you provide, without any change
0
w l
Top achievements
Rank 1
Rank 1
answered on 08 Mar 2017, 11:00 AM
{ "Table": [ { "JH": "temp", "RQ": "2017-03-05", "RCYL1": 2.10, "RCYL2": 1.20, "HS": 44.60 }, { "JH": "temp", "RQ": "2017-03-04", "RCYL1": 2.20, "RCYL2": 1.20, "HS": 44.60 }, { "JH": "temp", "RQ": "2017-03-03", "RCYL1": 3.0, "RCYL2": 1.70, "HS": 44.60 }, { "JH": "temp", "RQ": "2017-03-02", "RCYL1": 4.80, "RCYL2": 4.0, "HS": 15.70 }, { "JH": "temp", "RQ": "2017-03-01", "RCYL1": 2.80, "RCYL2": 2.40, "HS": 15.70 }, { "JH": "temp", "RQ": "2017-02-28", "RCYL1": 4.50, "RCYL2": 0.20, "HS": 95.0 }, { "JH": "temp", "RQ": "2017-02-27", "RCYL1": 2.10, "RCYL2": 0.10, "HS": 95.0 }, { "JH": "temp", "RQ": "2017-02-26", "RCYL1": 1.90, "RCYL2": 0.10, "HS": 95.0 }, { "JH": "temp", "RQ": "2017-02-25", "RCYL1": 2.90, "RCYL2": 1.80, "HS": 39.10 }, { "JH": "temp", "RQ": "2017-02-24", "RCYL1": 2.90, "RCYL2": 1.80, "HS": 39.10 }, { "JH": "temp", "RQ": "2017-02-23", "RCYL1": 2.90, "RCYL2": 1.80, "HS": 39.10 }, { "JH": "temp", "RQ": "2017-02-22", "RCYL1": 3.10, "RCYL2": 1.90, "HS": 39.10 }, { "JH": "temp", "RQ": "2017-02-21", "RCYL1": 2.40, "RCYL2": 1.50, "HS": 36.70 }, { "JH": "temp", "RQ": "2017-02-20", "RCYL1": 2.10, "RCYL2": 0.40, "HS": 80.80 }, { "JH": "temp", "RQ": "2017-02-19", "RCYL1": 2.90, "RCYL2": 0.60, "HS": 80.80 }, { "JH": "temp", "RQ": "2017-02-18", "RCYL1": 3.10, "RCYL2": 0.60, "HS": 80.80 }, { "JH": "temp", "RQ": "2017-02-17", "RCYL1": 2.40, "RCYL2": 0.50, "HS": 80.80 }, { "JH": "temp", "RQ": "2017-02-16", "RCYL1": 3.30, "RCYL2": 0.60, "HS": 80.80 }, { "JH": "temp", "RQ": "2017-02-15", "RCYL1": 3.30, "RCYL2": 2.50, "HS": 25.60 }, { "JH": "temp", "RQ": "2017-02-14", "RCYL1": 2.50, "RCYL2": 0.10, "HS": 95.0 }, { "JH": "temp", "RQ": "2017-02-13", "RCYL1": 2.80, "RCYL2": 2.10, "HS": 25.70 }, { "JH": "temp", "RQ": "2017-02-12", "RCYL1": 2.60, "RCYL2": 1.90, "HS": 25.70 }, { "JH": "temp", "RQ": "2017-02-11", "RCYL1": 2.30, "RCYL2": 1.70, "HS": 25.70 }, { "JH": "temp", "RQ": "2017-02-10", "RCYL1": 2.60, "RCYL2": 1.90, "HS": 25.70 }, { "JH": "temp", "RQ": "2017-02-09", "RCYL1": 2.60, "RCYL2": 1.40, "HS": 45.0 }, { "JH": "temp", "RQ": "2017-02-08", "RCYL1": 2.90, "RCYL2": 1.60, "HS": 45.0 }, { "JH": "temp", "RQ": "2017-02-07", "RCYL1": 1.60, "RCYL2": 0.60, "HS": 65.30 }, { "JH": "temp", "RQ": "2017-02-06", "RCYL1": 1.70, "RCYL2": 0.60, "HS": 63.10 }, { "JH": "temp", "RQ": "2017-02-05", "RCYL1": 1.70, "RCYL2": 1.40, "HS": 19.70 } ]}