1 Attachment(s)
[CLOSED] [#228] Scatter series label - fit into chart
Hello,
The problem is that the scatter series label goes out of chart's rendered area if the value equals to the axis maximum value. Do you have a workaround to align label text (except inreasing X axis maximum value)?
Thanks.
Figure: Attachment 6137
Sample code:
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.TestData();
this.Store1.DataBind();
}
}
private List<object> TestData()
{
List<object> data = new List<object>
{
new {
ID = 0,
Name = "Item 01",
XVal = 1,
Data1 = 1
},
new {
ID = 1,
Name = "Item 02",
XVal = 2,
Data1 = 2
},
new {
ID = 2,
Name = "Item 03",
XVal = 3,
Data1 = 3
},
new {
ID = 3,
Name = "Item 04",
XVal = 4,
Data1 = 4
},
new {
ID = 4,
Name = "Item 05",
XVal = 5,
Data1 = 5
}
};
return data;
}
</script>
<script type="text/javascript">
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Scatter Series Labels</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
<ext:Panel ID="Panel1" runat="server" Width="800" Height="500" Layout="FitLayout">
<Items>
<ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" Animate="false" Flex="1" Legend="true">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="XVal" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Data1" Type="Int"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Title="Vaue Y" Fields="Data1" Position="Left" Minimum="0" Maximum="10">
</ext:NumericAxis>
<ext:NumericAxis Title="Value X" Position="Bottom" Minimum="0" Maximum="5">
</ext:NumericAxis>
</Axes>
<Series>
<ext:ScatterSeries Axis="Bottom" XField="XVal" YField="Data1">
<MarkerConfig Type="Circle" Radius="7" Size="7" />
<HighlightConfig Size="10" Radius="10" />
<Label Display="Over" Field="Name" Orientation="Horizontal" FontSize="10"></Label>
<Tips TrackMouse="true" Width="100">
<Renderer Handler="this.setTitle(storeItem.data.Name);"></Renderer>
</Tips>
</ext:ScatterSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>
