How to change marker symbol based on value in angularjs

Question

I'm using angularjs for drawing highchart data. I want to customize marker symbol based on specific value.
here is code

/ Directive Highchart  
        App.directive('hcChart', function ($parse) {  
    'use strict';  
    return {  
        restrict: 'E',  
        replace: true,  
        template: '<div><div class="chart"></div></div></div>',  
        link: function (scope, element, attrs) {  
            attrs.chart = new Highcharts.chart(element[0], {  

                xAxis: {
                    title: {
                        text: "Date"
                    }
                },
                yAxis: {
                    title: {
                        text: "Value"
                    }
                },
                dataLabels: {
                    enabled: true
                }
                ,
                title: {
                    text: ""
                },
                chart: {
                    opacity: 0.51,
                    backgroundColor: "#FFFFFF",
                    plotBackgroundColor: 'rgba(0, 0, 0, 0.7)',
                     width: 1600,
                    height: 800,
                    zoomType: 'xy',
                    resetZoomButton: {
                        position: {
                            x: -140,
                            y: 0
                        }
                    }
                },
                tooltip: {
                    crosshairs: {
                        width: 2,
                        color: 'black',
                        dashStyle: 'shortdot'
                    }
                }
                ,
                exporting: {
                    buttons: {
                        contextButton: {
                            enabled: false
                        },
                        exportButton: {
                            text: 'Download',
                            tooltip: 'Download',
                            menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2)
                        },
                        printButton: {
                            text: 'Print',
                            onclick: function () {
                                this.print();
                            }
                        }
                    }
                }
            });
        Scope to watch categories
            scope.$watch(function () {
                return attrs.categories;
            }, function () {
                if (attrs.chart.xAxis.length === 0) {
                    attrs.chart.addAxis($parse(attrs.categories)(scope));
                } else {
                    attrs.chart.xAxis[0].setCategories($parse(attrs.categories)(scope));
                }
            });
  scope to watch series
            scope.$watch(function () {
                return attrs.series;
            }, function () {
                var i;
                for (i = 0; i < $parse(attrs.series)(scope).length; i++) {

                    if (attrs.chart.series[i]) {
                        attrs.chart.series[i].setData($parse(attrs.series)(scope)[i].data);
                    } else {
                        attrs.chart.addSeries($parse(attrs.series)(scope)[i]);
                    }
                }
                // remove series if new array passed is smaller
                if (i < attrs.chart.series.length - 1) {
                    var seriesLength = attrs.chart.series.length - 1;
                    for (j = seriesLength; j > i; j--) {
                        attrs.chart.series[j].remove();
                    }
                }
            });
        }
    };
}).controller('IndicatorAnalyticsDashboardController', function ($scope, $filter, $http, $timeout) {

    $scope.dateBegin = moment().subtract(17, "days");
    $scope.dateEnd = moment();
    $scope.aggregationSelected = "hourly";
    $http({

    })
            .then(function (listIndicatorsResult) {
                $scope.indicators = listIndicatorsResult.data;
                $scope.idIndicatorSelected = listIndicatorsResult.data[3];
                $scope.idIndicatorChanged();
            });
// Chart series default view-------------------------------------------

    $scope.myCategories = [];
    var opacity = 1;
    $scope.mySeries = [

        {
            type: "area",
            name: 'red',
            lineWidth: 0,
            fillOpacity: 0.65,
            color: '#FF0000',
            data: [],
            marker: {
                enabled: false
            }
        },
        {
            type: "area",
            name: 'amber',
            fillOpacity: opacity,
            lineWidth: 0,
            color: '#e7cd2c',
            data: [],
            marker: {
                enabled: false
            }
        },
        {
            type: "area",
            name: 'green',
            fillOpacity: 1,
            lineWidth: 0,
            color: '#00ad02',
            data: [],
            marker: {
                enabled: false
            }
        },
        {
            type: "area",
            name: 'light green',
            fillOpacity: opacity,
            lineWidth: 0,
            color: '#66cd67',
            data: [],
            marker: {enabled: false}
        },
        {
            type: "spline",
            name: 'Actual',
            color: "black",
            lineWidth: 3.2,
            data: [],

I tried this to update marker

     marker: {
                    enabled: true,
                    symbol: this.y > 40 ? "square" : "triangle"
                }
            },
            {
                type: "spline",
                name: 'Moving Median',
                data: [],
                color: "#00f6ff",
                visible: false,

                marker: {
                    symbol: 'triangle',
                    width: 16,
                    height: 16
                }
            }
        ];
//and inside function series has been update using:


    //                    // Assign values
                        $scope.myCategories = $scope.dateData;
                        $scope.mySeries[4].data = $scope.actual;
    //                    $scope.medianValue = $scope.median.map(Number);
                        $scope.mySeries[5].data = $scope.median;
                        $scope.mySeries[0].data = $scope.red;
                        $scope.mySeries[1].data = $scope.amber;
                        $scope.mySeries[2].data = $scope.green;
                        $scope.mySeries[3].data = $scope.lightGreen;
    //                    $scope.mySeries[4].marker = {
    //                        enabled: true,
    //                        symbol: this.x > 4 ? 'circle' : 'square'
    //                    };
                        console.log($scope.mySeries[4].marker.symbol);
                        $scope.mySeries[3].marker.enabled = "true";

Can anyone suggest how to update marker symbol of specific points based on some condition in angularjs? I have tried adding inside highchart directive and in update function inside angularjs controller.

Answer 1

You can use render event for updating your markers:

var redrawEnabled = true;

(...)

  chart: {
    events: {
      render: function() {

        if (redrawEnabled) {
          redrawEnabled = false;
          this.series[0].points.forEach(function(p) {
            p.update({
              marker: {
                symbol: p.y > 100 ? "square" : "triangle"
              }
            }, false);
          });

          this.redraw();

          redrawEnabled = true;
        }
      }
    }
  }

I iterate all the points and set the symbol based on the point's value. redrawEnabled flag serves to prevent infinite recursive loop - redraw function calls render event too.

Live working example: https://jsfiddle.net/kkulig/fw442v4b/

---

API references:

• https://api.highcharts.com/class-reference/Highcharts.Point#update
• https://api.highcharts.com/class-reference/Highcharts.Chart#redraw
• https://api.highcharts.com/highcharts/chart.events.render

Answer 2

We can use Angular foreach function to change marker symbol for the point based on some condition inside controller...

 angular.forEach($scope.array, function (value, i) {

                    $scope.actual[i] = {
                        y: value.VariableName,
                        marker: someCondition ? {
                            symbol: 'url',
                            width: 23,
                            height: 23}})