[CLOSED] How to skip series labels if they overlap in line chart?

[PriceRightHTML5team]

Hi,

I am creating one line chart and I have data which have many points close to each other so because of this labels get overlapped. I want to hide labels which are getting overlapped. Can you please tell me how to do that?

Please see the following screenshot:


Please see the code I am using:

1. cshtml page

@model List<ExtNetPractice.Models.ChartModel>
@{
    var X = Html.X();
}

@(X.Panel()
        .Title("Line Chart")
        .Layout(LayoutType.Fit)
        .Width(800)
        .Height(600)
        .Items(
            X.Chart()
                .ID("Chart1")
                .StyleSpec("background:#fff;")
                .Shadow(true)
                .StandardTheme(StandardChartTheme.Category1)
                .Animate(true)
                .LegendConfig(X.ChartLegend().Position(LegendPosition.Right))
                .Store(X.Store()
                    .Data(Model)
                    .Model(X.Model()
                        .Fields(
                            X.ModelField().Name("DateColumn"),
                            X.ModelField().Name("Data1")
                        )
                    )
                    .Proxy(X.AjaxProxy()
                        .Url(Url.Action("GetData"))
                        .Reader(X.JsonReader().Root("data"))
                    )
                )
                .Axes(
                    X.NumericAxis()
                        .Fields(new[] { "Data1" })
                        .Title("Price")
                        .MinorTickSteps(1)
                        .Minimum(0)
                        .GridConfig(X.AxisGrid()
                            .Odd(new SpriteAttributes { Opacity = 1, Fill = "#ddd", Stroke = "#bbb", StrokeWidth = 0.5 })
                        ),
                     X.TimeAxis()
                            .DateFormat("dd-MMM-yyyy")
                            .Position(Position.Bottom)
                            .Fields("DateColumn")
                            .Title("Date")
                            .FromDate(Convert.ToDateTime("01-01-2014"))
                )
                .Series(
                    X.LineSeries()
                        .Axis(Position.Left)
                        .Smooth(3)
                        .XField("DateColumn")
                        .YField("Data1")
                        .HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
                        .MarkerConfig(new SpriteAttributes { Type = SpriteType.Circle, Size = 4, Radius = 4, StrokeWidth = 2 })
                        .Label(X.SeriesLabel()
                                .Display(SeriesLabelDisplay.Over)
                                .Orientation(Orientation.Vertical)
                                 .Field(new[] { "Data1" })
                                .Renderer(r => r.Handler = "return (Ext.util.Format.date(item.storeItem.get('DateColumn'),'d-M-Y') + ' / '+ Ext.util.Format.number(item.storeItem.get('Data1'), '0.00'));")
                              )
                        .Tips(Html.X().ChartTip()
                                                        .TrackMouse(true)
                                                        .Layout(LayoutType.Fit)
                                                        .Items(Html.X().Container())
                                                        .Renderer(r => r.Handler = "this.down('container').update(Ext.util.Format.date(storeItem.get('DateColumn'),'d-M-Y') + ' / '+ Ext.util.Format.number(storeItem.get('Data1'), '0.00'));")
                                                )
                )
        )
    )

2. Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ExtNetPractice.Models
{
    public class ChartModel
    {
        public DateTime DateColumn { get; set; }

        public string Name { get; set; }

        public int Data1 { get; set; }

        public int Data2 { get; set; }

        public int Data3 { get; set; }
    }
}

3. Controller code

using Ext.Net;
using Ext.Net.MVC;
using ExtNetPractice.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ExtNetPractice.Controllers
{
    public class HomeController : Controller
    {
 public ActionResult SampleChart()
        {
            return View(GetLineChartData()); 
        }

        private List<ChartModel> GetLineChartData()
        {
            List<ChartModel> data = new List<ChartModel>()
            {
                new ChartModel()
                {
                DateColumn=new DateTime(2014,02,01),
                Data1=20,
                Data2=21,
                Data3=22
                },

                 new ChartModel()
                {
                DateColumn=new DateTime(2014,02,15),
                Data1=21,
                Data2=28,
                Data3=13
                },

                 new ChartModel()
                {
                DateColumn=new DateTime(2014,02,17),
                Data1=21,
                Data2=28,
                Data3=13
                },

                 new ChartModel()
                {
                DateColumn=DateTime.Today,
                Data1=19,
                Data2=16,
                Data3=22
                }
            };

            return data;
        }
}
}

[Daniil]

Hi @PriceRightHTML5team,

For some reason your code doesn't render labels for me. Though, the screenshot is enough for me to understand the problem.

In the Label's Renderer you could try to analyze the previous and next DateColumn values and return an empty string if they are close. I am not 100% sure it will work, but I think it is worth to try.