[Solved] Activating and Deactivating the Crosshair

[Karl-Heinz]

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?

[Iliana Dyankova]

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

[Scott]

Has this been implemented in the latest release as the steps above to change the visible property still aren't working as expected?

[Stefan]

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