Question

I would like my users to be able to click anywhere on my gauge and then respond to the event.

Currently I am using the following plot options but it only makes the gauge needle clickable.

Any ideas on how to configure this to use the whole gauge area? I have updated my code to make use of the method suggested below, but the click event is not being attached as expected.

I am using the directive as found here https://github.com/rootux/angular-highcharts-directive

angular.module('chartsExample.directives',[])

.directive('gauge', function () {
    return {
        restrict: 'E',
        template: '<div></div>',
        transclude: true,
        replace: true,

        link: function (scope, element, attrs) {
            var chartsDefaults = {
                chart: {
                    renderTo: element[0],
                    type: "gauge",
                    height: attrs.height || null,
                    width: attrs.width || null,
                    cursor: 'pointer',
                    events:{
                        click:function(){
                            alert('click');
                        }
                    }
                }
            };

            //Update when charts data changes
            scope.$watch(function() { return attrs.value; }, function(value) {
                if(!attrs.value) return;
                // We need deep copy in order to NOT override original chart object.
                // This allows us to override chart data member and still the keep
                // our original renderTo will be the same
                var deepCopy = true;
                var newSettings = {};
                $.extend(deepCopy, newSettings, chartsDefaults, JSON.parse(attrs.value));
                var chart = new Highcharts.Chart(newSettings);
            });
        }
    }

});
Was it helpful?
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top