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

Activating and Deactivating the Crosshair

3 Answers 256 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Karl-Heinz
Top achievements
Rank 1
Karl-Heinz asked on 27 Feb 2014, 03:20 PM
Hello,

I would like to implement a line chart which gives the user the opportunity to activate and to deactivate the crosshair with a drop-down menu. By default, the crosshair should not be visible.

The following code shows a sample script for the chart:

<div id="chart"></div>
 
<script type="text/javascript">
    $("#chart").kendoChart({
        categoryAxis: {
            categories: ["2012", "2013", "2014"],
            crosshair: {
                color: "green",
                width: 2,
                visible: false
            }
        },
        series: [{
            type: "line",
            data: [1, 2, 3]
        }]
    });
 
    function displayCrosshair() {
        var chart = $("#chart").data('kendoChart');
        chart.options.categoryAxis.crosshair.visible = true;
        chart.refresh();
    }
 
    function hideCrosshair() {
        var chart = $("#chart").data('kendoChart');
        chart.options.categoryAxis.crosshair.visible = false;
        chart.refresh();
    }
</script>

The crosshair remains invisible after calling displayCrosshair. The function only works properly if crosshair.visible has the value true:​

<script type="text/javascript">
    $("#chart").kendoChart({
        categoryAxis: {
            categories: ["2012", "2013", "2014"],
            crosshair: {
                color: "green",
                width: 2,
                visible: true
            }
        },
        series: [{
            type: "line",
            data: [1, 2, 3]
        }]
    });
</script>

How can I avoid this?

3 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Dyankova
Telerik team
answered on 03 Mar 2014, 09:58 AM
Hello Karl-Heinz,

Thank you for pointed our attention to this issue - it appears there is a bug in the current version of Kendo UI DataViz and categoryAxis.crosshair cannot be activated dynamically. I forwarded the issue to our developers for further investigation - we will do our best to address it as soon as possible. As a small sign of gratitude I updated your points.

Regards,
Iliana Nikolova
Telerik
0
Scott
Top achievements
Rank 2
answered on 22 May 2017, 10:39 AM
Has this been implemented in the latest release as the steps above to change the visible property still aren't working as expected?
0
Stefan
Telerik team
answered on 24 May 2017, 06:09 AM
Hello Scott,

Currently, the supported approach to dynamically change the Chart options is to use the setOptions method:

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#methods-setOptions

I made a Dojo example demonstrating this:

http://dojo.telerik.com/OpedO

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Charts
Asked by
Karl-Heinz
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Scott
Top achievements
Rank 2
Stefan
Telerik team
Share this question
or