Bar chart SeriesClick from label

[Mark]

Hi there,

On my bar chart individual bars trigger JS code via the onSeriesClick which is working fine.  If you hover over the bar it slightly changes the colour which is helpful so the end user knows it's clickable.  However, sometimes bars are really short and it's therefore hard for them to tell they can click it and it's hard to click as it's such a small area to click.

I also have labels on each bar.  I would like to extend the onSeriesClick event so that if you click the label it also triggers the event.  I noticed it does this by default on high resolution screens, but on small screens this functionality seems to disappear.

Is it possible to make this behaviour work for all resolutions somehow?

Below is my view code, and I've attached a screenshot of the graph.  The arrow on the screenshot is an example - the red bar is the only clickable part for low resolution screens, but I'd like to be able to click the label text over the top too to trigger the event.

 @( Html.Kendo().Chart<Models.RecommendedActionItemsBarChartModel>()
                .Name("recommendedActionItems")
                .ChartArea(chartArea => chartArea.Background("#F5F5F5"))
                .Title(title => title
                    .Text("Recommended Action Items")
                    .Position(ChartTitlePosition.Top))
                .DataSource(ds => ds
                    .Read(read => read.Action("RecommendedActionItemsBarChart", "Reporting"))
                    .Group(g => g.Add(d => d.category))
                )
                .Series(series => series
                    .Bar(d => d.Share, d => d.Color).CategoryField("category")
                    .Name("#:group.value#")
                    .Stack(true)
                    .Labels(labels => labels
                        .Visible(true)
                        .Template("#= dataItem.category # #= value # (#= dataItem.PercentageField #)")
                        .Position(ChartBarLabelsPosition.InsideBase)
                    )
                )
                .CategoryAxis(axis => axis
                    .Visible(false)
                )
                .ValueAxis(axis => axis
                    .Numeric()
                    .Labels(labels => labels
                        .Visible(false)
                    )
                )
                .Tooltip(tooltip => tooltip
                    .Visible(false)
                )
                .Legend(legend => legend
                    .Visible(false)
                    .Position(ChartLegendPosition.Bottom)
                    .Labels(x => x.Font(font: "9px Arial,Helvetica,sans-serif"))
                )
                .Events(events => events
                    .SeriesClick("onSeriesClick_recActionItems")
                    .DataBound("onDataBound_recActionItems")
                )
)

Thanks,

Mark

[T. Tsonev]

Hello,

Thank you for describing the problem in detail.

It is possible to modify the bar visual element so they will have a larger clickable area by inserting a transparent element.
I've prepared a short snippet here to demonstrate.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Mark]

That worked great, thanks!

[Das, Avijit]

This does not work when the bar value is 0. Check this DOJO. http://dojo.telerik.com/OWoXAFIB 

[Das, Avijit]

Can you try to solve the actual query instead of this workaround? I mean, cant i just click on the series label to get the label value irrespective of where the series values are proper or null values or zero values?

[Stefan]

Hello, Das,

Thank you for the example.

The scenario where the value is 0 is expected because the value 0 is not visually represented in the Chart. As the value is not represented there is not series to be clicked. It is possible, to check if the value is 0, and to programmatically return custom series element, but this can show visually incorrect data as the 0 values will be shown as 0.* on the Chart.

As for clicking the label, we have a dedicated axisLabelClick event which can be utilized in these cases:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/axislabelclick

If you have more feedback on our widgets, please share it, so we can improve it:

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback?category_id=46450

Regards,
Stefan
Progress Telerik