This is a migrated thread and some comments may be shown as answers.

Area Chart

1 Answer 14 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Veteran
Robert asked on 09 Jan 2020, 07:12 PM

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>

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 13 Jan 2020, 12:21 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
Chart
Asked by
Robert
Top achievements
Rank 1
Veteran
Answers by
Nikolay
Telerik team
Share this question
or