jQuery addClass example

Change class name on click in jQuery

by Sascha

HTML

<script src="https://code.highcharts.com/highcharts.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>

CSS

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

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'solidgauge',
    },

    title: {
        useHTML: true,
        text: `
          <div class="data-section text-center">
            <p>50/100</p>
            <p class="company-data">Company: 10</p>
          </div>
        `,
        align: 'center',
        verticalAlign: 'middle',
        y: -25, // appears visually centered here
        x: 10,
      },

    tooltip: {
        enabled: false,
    },

    pane: {
        startAngle: 36,
        endAngle: 36,
        background: [{
            backgroundColor: '#FFF',
            borderWidth: 0
        }]
    },

    yAxis: {
        min: 0,
        max: 100,
        lineWidth: 0,
        tickPositions: []
    },

plotOptions: {
      pie: {
        dataLabels: {
          enabled: false,
        },
        startAngle: 0,
        endAngle: 360,
        center: ['50%', '50%'],
        colors: ['#4CAF50', '#F2F2F2'],
        linecap: 'round',
      },
        solidgauge: {
            dataLabels: {
                enabled: false
            },
            linecap: 'round',
            stickyTracking: false,
            rounded: true
        }
    },

series: [
      {
        type: 'pie',
        innerSize: '85%',
        data: [
          ['',   50],
          ['',   50],
        ]
      },{
        name: 'Company',
        data: [{
            color: '#FFF',
            radius: '107%',
            innerRadius: '99%',
            y: 10,
        }]
    }]
});