Highcharts solidgauge with drilldown

Question

I'm trying to do a drilldown of a solidgauge as the first level to a bar chart as a second level, but it does not work out well. Can you help me please?

#container {
 margin: 0 auto;
 max-width: 400px;
 min-width: 380px;
}

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>

<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>


<div id="container"></div>

(Clicking on one of the gauge disks to display the drilldown should display a bar graph but a small portion of the gauget disks come out.)

https://jsfiddle.net/JMarcia/5c1wv8t0/42/

score 0 · Answer 1 · answered Mar 11 '19 at 05:42

The drilldown from solid-gauge to the other series types is not supported. You can create new chart or or switch containers visibility in point click event to simulate the drilldown.

var solidGaugeOptions = {
    ...,

    plotOptions: {
        solidgauge: {
            ...,
            events: {
                click: function() {
                    document.getElementById('back').style.display = "block";
                    Highcharts.chart('container', columnsOptions);
                }
            }
        }
    }
}

var columnsOptions = {
    series: [...]
}

Highcharts.chart('container', solidGaugeOptions);

document.getElementById('back').addEventListener('click', function() {
    this.style.display = "none";
    Highcharts.chart('container', solidGaugeOptions);
});

Live demo: https://jsfiddle.net/BlackLabel/4n7tvdLh/

API Reference: https://api.highcharts.com/class-reference/Highcharts#.chart

Thank you so much ! here a example with other options https://jsfiddle.net/JMarcia/4ry2fa7p/72/ — Marcia Zavaleta, Mar 11 '19 at 21:12

Highcharts solidgauge with drilldown

1 Answers1