0
$scope.chartOptions = { [  
   {  
      "options":{  
         "chart":{  
            "plotBorderWidth":1,
            "events":{  

            },
            "zoomType":"xy",
            "type":"column"
         },
         "legend":{  
            "enabled":true,
            "floating":false,
            "align":"left",
            "maxHeight":60,
            "itemWidth":100
         },
         "plotOptions":{  
            "line":{  
               "dataLabels":{  
                  "enabled":true,
                  "color":"black",
                  "style":{  
                     "fontSize":"8px"
                  }
               },
               "series":{  
                  "color":"#FFFFFFF"
               }
            },
            "column":{  
               "colorByPoint":true,
               "dataLabels":{  
                  "enabled":true,
                  "color":"black",
                  "style":{  
                     "fontSize":"8px"
                  }
               }
            },
            "area":{  
               "dataLabels":{  
                  "enabled":true,
                  "color":"black",
                  "style":{  
                     "fontSize":"8px"
                  }
               }
            },
            "bar":{  
               "colorByPoint":true,
               "dataLabels":{  
                  "enabled":true,
                  "color":"black",
                  "style":{  
                     "fontSize":"8px"
                  }
               }
            },
            "spline":{  
               "dataLabels":{  
                  "enabled":true,
                  "color":"black",
                  "style":{  
                     "fontSize":"8px"
                  }
               }
            }
         },
         "exporting":{  
            "enabled":false
         },
         "yAxis":[  
            {  
               "labels":{  
                  "style":{  
                     "color":"#89A54E"
                  }
               },
               "title":{  
                  "text":"SUM(AccountCodeAlternateKey)",
                  "events":{  

                  }
               },
               "opposite":false,
               "showEmpty":false
            }
         ],
         "tooltip":{  
            "headerFormat":"<b>{point.key}</b><br/>",
            "pointFormat":"{series.name}: {point.y}<br/>"
         }
      },
      "title":{  
         "text":"test_drilldown_col"
      },
      "xAxis":{  
         "labels":{  
            "useHTML":true,
            "rotation":-90
         },
         "categories":[  
            "null",
            "Assets",
            "Balances",
            "Expenditures",
            "Flow",
            "Liabilities",
            "Revenue",
            "Statistical"
         ],
         "crosshair":true,
         "useHTML":true,
         "lineColor":"transparent",
         "tickLength":0,
         "title":{  
            "text":"AccountType",
            "events":{  

            }
         }
      },
      "yAxis":{  

      },
      "drilldown":{  
         "series":[  
            {  
               "id":"Assets",
               "data":[  
                  [  
                     "abc",
                     4
                  ],
                  [  
                     "xyz",
                     2
                  ]
               ]
            },
            {  
               "id":"Flow",
               "data":[  
                  [  
                     "Apples",
                     4
                  ],
                  [  
                     "Oranges",
                     2
                  ]
               ]
            },
            {  
               "id":"Balances",
               "data":[  
                  [  
                     "Toyota",
                     4
                  ],
                  [  
                     "Opel",
                     2
                  ]
               ]
            }
         ]
      },
      "plotOptions":{  
         "line":{  
            "dataLabels":{  
               "enabled":true,
               "color":"black",
               "style":{  
                  "fontSize":"8px"
               }
            },
            "series":{  
               "color":"#FFFFFFF"
            }
         },
         "column":{  
            "colorByPoint":true,
            "dataLabels":{  
               "enabled":true,
               "color":"black",
               "style":{  
                  "fontSize":"8px"
               }
            }
         },
         "area":{  
            "dataLabels":{  
               "enabled":true,
               "color":"black",
               "style":{  
                  "fontSize":"8px"
               }
            }
         },
         "bar":{  
            "colorByPoint":true,
            "dataLabels":{  
               "enabled":true,
               "color":"black",
               "style":{  
                  "fontSize":"8px"
               }
            }
         },
         "spline":{  
            "dataLabels":{  
               "enabled":true,
               "color":"black",
               "style":{  
                  "fontSize":"8px"
               }
            }
         }
      },
      "loading":false,
      "series":[  
         {  
            "name":"SUM(AccountCodeAlternateKey)",
            "data":[  
               {  
                  "name":"Assets",
                  "y":23867,
                  "drilldown":"Assets"
               },
               {  
                  "name":"Balances",
                  "y":28580,
                  "drilldown":"Balances"
               },
               {  
                  "name":"Flow",
                  "y":191730,
                  "drilldown":"Flow"
               }
            ],
            "color":"#E3E75B"
         }
      ]
   }
] }

This is my dynamically generated json with the response from API, Done changes in highcharts-ng.js to support drilldown by following Highcharts-ng with drilldown But still drilldown is not working. Please suggest what changes still needs to be done.

And my $scope.chartOptions have multiple charts data also

Placeholder

  • Could you create a simplified online demo of your chart in online code editor like jsfiddle? Try to reproduce this issue with sample data as simple as possible. It will be much easier to help you then. – Wojciech Chmiel Jan 17 '19 at 17:47
  • I have changed the highcharts.js version from 5 to 7. With static json data I could see the drilldown but If I get json data from the API call then I couldn't able to see the chart. But Whatever json I got from the response copied into a variable and gave that as input to my chart. It is rendering. Can you help why this weird behaviour. http://jsfiddle.net/z37ed4sv/ – Swetha Sappati Jan 18 '19 at 11:10
  • I don't see any issues in the example you send me above. Could you reproduce it with json data fetched from the API so that I can check what's wrong with it? – Wojciech Chmiel Jan 20 '19 at 11:35

0 Answers0