Changing chart theme dynamically in zingchart is not working

Question

I am trying to change the chart theme dynamically using this code:

changeTheme(e) {
        this.previewService.chartConfig.theme = this.themes[e.target.attributes.value.value];
      }

This is the way I am changing the theme dynamically, it got reflected in json source of chart but it is not updating the actual theme. Could you show me a working example for same? Please check this fiddle. https://jsfiddle.net/pshiral/30955m70/7/

Answer 1

Full disclosure, I'm a member of the ZingChart team.

I have updated our Angular Directive to watch for changes on the zcRender object. It will take care of chart cleanup and re-rendering the chart for you. The latest version 1.2.1 can be downloaded from github or npm. I put together a small demo in a plnkr demonstrating the changes.

                // If defaults or theme has changed. 
            // Destroy and re-render chart
            $scope.$watch('zcRender', function(newValue, oldValue, scope) {
              if(initializing.render){
                  initializing.render = !initializing.render;
                  return;
              }
              // console.log('---newValue',newValue)
              // console.log('---oldValue',oldValue)
              // console.log('---scope',scope)

              zingchart.exec(scope.id, 'destroy');
              scope.zcRender = newValue;
              scope.renderChart();
            },true);

            // Break render function out of link so we can consistently
            // call the same rendering algorithm
            $scope.renderChart = function (){
              var id = $element.attr('id');
              //Defaults
              var _json = {
                  data : {
                      type : 'line',
                      series : []
                  },
                  width : 600,
                  height: 400
              };

              //Add render object.
              if($scope.zcRender){
                  mergeObject($scope.zcRender, _json);
              }

              //Add JSON object
              if($scope.zcJson){
                  mergeObject($scope.zcJson, _json.data);
              }

              //Add Values
              if($scope.zcValues){
                injectValues($scope.zcValues, _json.data);
              }

              //Add other properties
              _json.data.type = ($attrs.zcType) ? $attrs.zcType : _json.data.type;
              _json.height = ($attrs.zcHeight) ? $attrs.zcHeight : _json.height;
              _json.width = ($attrs.zcWidth) ? $attrs.zcWidth : _json.width;
              _json.id = id;

              //Set the box-model of the container element if the height or width are defined as 100%.
              if(_json.width === "100%" && !$element.css('width')){
                  $element.css('width', '100%');
              }
              if(_json.height === "100%" && !$element.css('height')){
                  $element.css('height', '100%');
              }
              zingchart.render(_json);
          }