Kendo line chart error bars, toggle on hoverover

1 Answer 48 Views
Charts
raju
Top achievements
Rank 1
raju asked on 21 Aug 2023, 01:33 PM

http://dojo.telerik.com/aGisuSuR/2

I am trying to hide and show error bar on a Kendo line chart based on when the mouse is over the line point, is it possible to do this? I tried using highlight, I can probably create a visual, but I just wanted to hide all the error bars and show only when the point is highlighted. I tried to set erroBar visibility false and set it to true on Highlight, that doesn't seem to work. Even if this worked, this would set the visibility of all error bars?, I just want to set it for only one point at a time, as showing all at once is will overlap error bars.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/line-charts/remote-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
    <script>
        function createChart() {
           var StrokeAnimation = kendo.drawing.Animation.extend({
             init: function(element) {
               kendo.drawing.Animation.fn.init.call(this);
               this.initialStroke = $.extend({}, element.options.stroke);
               this.color = element.options.fill.color;
               this.element = element;
              
             },
             step: function(pos) {
               this.element.stroke(this.color, this.initialStroke.width * pos * 5, 0.5);
             },
             
             reset: function() {
               this.element.options.set("stroke", this.initialStroke);
             }
           });
            $("#chart").kendoChart({
                dataSource: [
    {
        "country": "Spain",
        "year": "2008",
        "unit": "GWh",
        "solar": 2578,
        "hydro": 26112,
        "wind": 32203,
        "nuclear": 58973,
    "low":51000,
    "high":68000
    },
    {
        "country": "Spain",
        "year": "2007",
        "unit": "GWh",
        "solar": 508,
        "hydro": 30522,
        "wind": 27568,
        "nuclear": 55103,
     "low":52000,
    "high":60000
    },
    
],
                title: {
                    text: "Spain electricity production (GWh)"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "line",
                    errorLowField: "low",
                    errorHighField: "high",
                    errorBars: {
                      highlight:{
                      line: {
                        width: 1,
                        dashType: "solid"
                       }
                      },
                    
                    visible: true,
                    endCaps: true,
                    width: 10,
                    color: "darkblue",
                    line: {
                        width: 1,
                        dashType: "solid"
                       }
                   },
                    highlight: {
                      errorBars: {
                        line: {
                          width: 1,
                          dashType: "solid"
                         }
                      }
                    }
                },
                series: [{
                    field: "nuclear",
                    name: "Nuclear"
                }, {
                    field: "hydro",
                    name: "Hydro"
                }, {
                    field: "wind",
                    name: "Wind"
                }],
                categoryAxis: {
                    field: "year",
                    labels: {
                        rotation: -90
                    },
                    crosshair: {
                        visible: false
                    }
                },
                valueAxis: {
                    labels: {
                        format: "N0"
                    },
                    majorUnit: 10000
                },
                tooltip: {
                    visible: false,
                    shared: false,
                    format: "N0"
                },
               
               render: function(e) {
                
                }
              
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>


</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 24 Aug 2023, 12:24 PM

Hello Raju,

I am afraid that such behavior is not supported. The errorBar could not be shown/hidden dynamically as in order to hide it or show it the entire Chart should be redrawn. 

Let me know in case you have any additional questions on the matter.

Regards,
Neli
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
Charts
Asked by
raju
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or