View Full Version : [CLOSED] Chart marker radius for tip

Apr 16, 2013, 4:11 PM

When points in a line series (ext:chart) are close to each other and tips configured, it is hard to make sure which point the chart tip belongs to. Even when I use ItemMouseUp event and display a notification on click, the information belongs to the point which's tip is visible not the one I am clicking on. I am not sure if I could describe the problem clear. My question is, how can I decrease the area of the marker causing the tip popup and make sure it will work more preciesly even if the points in the chart are very close but not touching each other.


Apr 16, 2013, 11:01 PM

It seems that you should change default marker and highlight size:

<ext:LineSeries Axis="Left" Smooth="3" XField="Name" YField="Data2">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Circle" Size="4" Radius="1" StrokeWidth="0" />
<Tips runat="server" TrackMouse="true" Width="110" Height="25">
<Renderer Handler="this.setTitle(storeItem.get('Data1') + ' visits in ' + storeItem.get('Name').substr(0, 3));"></Renderer>

Apr 16, 2013, 11:31 PM

I played with size and radius values, it did not have effect on the distance required to show tip for a marker. (I set size=1) Can you provide a sample (runnable) code where the markers are shown only if mouse is "over a marker point" or "closer than any other marker" (not roughly close to it).


Apr 17, 2013, 12:04 AM
Okay, below is the code to play with. Tip displays ID of the marker point and they have values 0 to 5 (from left to right). Put mouse on the last marker, you will see 4 instead of 5. To see 5, I need to move marker to the right of the last marker. The same thing applies to other markers also. Can you modify the code's highlight config and marker config in order to see the tip only if mouse is over the marker point?

Note: you may need to decrease the time difference between points if they are discrete enough to show tips regularly (may be dependent on the screen resolution).


<%@ 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();
private List<object> TestData()
List<object> data = new List<object>
new {
ID = 0,
Date = DateTime.Today,
Data = 1
new {
ID = 1,
Date = DateTime.Today.AddMinutes(30),
Data = 1
new {
ID = 2,
Date = DateTime.Today.AddMinutes(60),
Data = 1
new {
ID = 3,
Date = DateTime.Today.AddMinutes(90),
Data = 1
new {
ID = 4,
Date = DateTime.Today.AddMinutes(120),
Data = 1
new {
ID = 5,
Date = DateTime.Today.AddMinutes(150),
Data = 1
return data;

<!DOCTYPE html>
<head id="Head1" runat="server">
<title>Ext.NET Examples</title>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
<ext:Panel ID="Panel1" runat="server" Title="Showing tip..." Width="800" Height="500" Layout="FitLayout">
<ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" Animate="false">
<ext:Store ID="Store1" runat="server">
<ext:Model ID="Model2" runat="server" IDProperty="ID">
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="Date" Type="Date" />
<ext:ModelField Name="Data" Type="Int" />
<ext:TimeAxis Fields="Date" Position="Bottom" Title="Time" DateFormat="Y, MMM dd">
<ext:NumericAxis Title="Value" Fields="Data" Position="Left" MajorTickSteps="1" MinorTickSteps="0">
<Renderer Handler="return value" />
<ext:LineSeries Axis="Left" XField="Date" YField="Data" ShowInLegend="false">
<Tips ID="MyTip" runat="server">
<Renderer Handler="this.setTitle(storeItem.data.ID.toString());"></Renderer>

Apr 17, 2013, 9:58 AM

I think we are facing here the same issue as here:

Here is a report to Sencha which I updated with a new message.

Apr 19, 2013, 12:39 PM
Unfortunately, yes (; The main problem is that I am facing so many issues like this when using ext:chart components and really started to think completely leaving it off and find another solution for chart issues. Do you have a suggestion to use as alternative?


Apr 19, 2013, 2:46 PM
It is also our concern.

Unfortunately, we have no resources to develop Charts.

I am going to give this issue another try.

Regarding alternatives. There are some alternative solutions. Unfortunately, I am not quite experienced in it to suggest something.

Apr 19, 2013, 3:27 PM
A good news. Please follow:

Apr 19, 2013, 4:43 PM
I call it a "real bingo" (; Thanks Daniil, it works perfect. Please close the threat and wish me luck for the next chart challanges (;

Apr 19, 2013, 4:54 PM
Good luck!:) We are here to help.