Area Chart

[Robert]

When you hover over the legend it displays all the points for the series you are hovering over.  See attached image.  Is there a way to turn this off?

 

<div>
    <div id="chart">

        @(Html.Kendo().Chart<CashInvestedAreaChart>()
                .Name("chartCashInvested")
                .DataSource(ds => ds.Read(read => read.Action("CashInvestedChartData", "PracticeAnalytics")))
                .Transitions(false)
                .Theme("bootstrap")
                .Legend(l => l.Visible(true)
                        .Position(ChartLegendPosition.Bottom))
                .ChartArea(c => c.Margin(10, 8, 0, 10).Background("transparent").Height(280))
                .SeriesDefaults(s => s
                    .Area()
                    .Line(l => l.Style(ChartAreaStyle.Smooth))
                    .Stack(false))
                .CategoryAxis(axis => axis
                    .Categories(m => m.Date)
                    .Line(l => l.Visible(false))
                    .Labels(l => l.Visible(false))
                    .MajorGridLines(l => l.Visible(false))
                    )
                .Tooltip(t => t.Visible(true).Template("#= series.name # <br /> #= kendo.toString(kendo.parseDate(category), 'MM/dd/yyyy') #: #= kendo.format('{0:C}', value) #"))
                .Series(series =>
                {
                    series.Area(model => model.MarketValue).Name("Market Value").Color("#60A7F5").Opacity(1);
                    series.Area(model => model.CashInvested).Name("Cash Invested").Color("#35608F").Opacity(1);
                })
                .ValueAxis(axis => axis
                    .Numeric()
                    .Labels(labels => labels.Template("#= ciFormatMillions(value) #" ) )
                    .AxisCrossingValue(-10)
                    .Line(line => line.Visible(false))
                )
                .Events(e => e.Render("scaleChart"))
        )
    </div>

[Nikolay]

Hi Robert,

To achieve that you could use the legendItemHover event of the Chart and prevent its default behavior:

.Events(e => e.LegendItemHover("onLegendItemHover"))
...
    //the handler
    function onLegendItemHover(e) {
        e.preventDefault();
    }

This could be observed in the following Dojo demo. Please note that it uses a jQuery Chart implementation but the logic remains valid for MVC Chart:

http://dojo.telerik.com/ujijeNaR

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik