Highchart custom

Drilldown based on options

by Rishi Kumar

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS

.custom_first_li {
    background: #ffffff;
}
.rightClickPanel .arrow:after {
    bottom: 1px;
    margin-left: -10px;
    border-top-color: #fff;
    border-bottom-width: 0;
    content: " ";
}
.rightClickPanel .arrow:after {
    border-width: 10px;
    content: "";
}
.rightClickPanel .arrow,
.rightClickPanel .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.custom_first_li span:hover {
    background-color: #1D71A7;
    color: #ffffff;
    font-weight: bold !important;
}
.custom_first_li span {
    display: block;
    padding: 2px 5px;
    cursor: pointer;
    font-size: 17px;
    font-weight: normal !important;
}

JavaScript

var open =['<div id="rightClickPane" class="rightClickPanel">',
     '<div class="arrow"></div>',
     '<div class="vmenu">',
        '<div class="custom_first_li" ng-show="rClickObject.favorite">',
           '<span class="type">Add favorite</span>',
        '</div>',
        '<div class="custom_first_li" ng-hide="rClickObject.favorite">',
           '<span class="type">Remove favorite</span>',
        '</div>',
     '</div>',
  '</div>'].join("")
 drilldowns = {
     'Animals': {
       name: 'Animals',
       data: [{name: 'Cats',
       				y: 4,
              drilldown: true
             },{name: 'Dogs',
       				y: 4,
              drilldown: true
             },{name: 'Balaji',
       				y: 4,
              drilldown: true
             }]
     },
     'Fruits': {
       name: 'Fruits',
       data: [
         ['Apples', 5],
         ['Oranges', 7],
         ['Bananas', 2]
       ]
     },
     'Cars': {
       name: 'Cars',
       data: [
         ['Toyota', 1],
         ['Volkswagen', 2],
         ['Opel', 5]
       ]
     }
 },
// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {
                console.log(e)
                  /*hs.htmlExpand(null, {
                     pageOrigin: {
                       x: e.originalEvent.pageX || e.originalEvent.clientX,
                       y: e.originalEvent.pageY || e.originalEvent.clientY
                     },
                     headingText: this.series.name,
                     maincontentText: open,
                     width: 10,
                     height:200
                   });*/
                   var chart = this
                    chart.showLoading('Simulating Ajax ...');
                        series = drilldowns[e.point.name];
                    // Show the loading label
                    setTimeout(function () {
                       ...