CODEWITHSUNDEEP
highcharts
Reddy
Reddy

Reputation: 1497

Highcharts {Gauge} - Remove bottom border and change dial position

I have created a gauge chart like shown in below figure.

What I am able to Achieve

enter image description here

Issues I am facing now

Issues I am currently facing are (marked in below figure):

1. Not able to remove bottom border

2. Not able to move down the dial

enter image description here

Desired result

Can some please help me to achieve the desired result please like below?

enter image description here

HTML

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

Script

$(function () {
    $('#gauge-container').highcharts({
        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false,
            backgroundColor: null,
        },
        title: {
            text: null
        },
        background: null,
        credits: {
            enabled: false
        },
        pane: {
            startAngle: -120,
            endAngle: 120,
            background: {
                backgroundColor: 'transparent', 
                borderWidth: 10,
                borderColor: '#e7f2f8', 
                innerradious:'10%'
            },
            /*background: [{
                backgroundColor: 'white',
                outerRadius: '19%'
            }, {
                borderWidth: 15,
                borderColor: '#e7f2f8',
            }, {
                // default background
            }, {
                backgroundColor: null,
                borderColor: '#ffffff',
            }]*/
        },

        yAxis: {
            min: 0,
            max: 100,
            lineColor: null,
            minorTickInterval: 'auto',
            minorTickWidth: 0,
            minorTickLength: 0,
            minorTickPosition: 'outside',
            minorTickColor: '#fff',
            tickPixelInterval: '30',
            tickWidth: 0,
            tickLength: 0,
            tickPosition: 'inside',
            tickColor: '#fff',
            //offset: -2,
            labels: {
                step: 4,
                //rotation: 'auto',
                distance: -33,
                useHTML: true,
                //y: 10,
                style: {
                    fontFamily: 'Roboto',
                    fontWeight: '400',
                    fontSize: '18px',
                    textShadow: '0',
                    color: '#aaaaaa'
                }
            },
            title: { text: null },
            plotBands: [{
                from: 0,
                to: 20,
                color: '#99cc01',
                innerRadius: '85%',
                outerRadius: '105%',
                //borderWidth: 5,
                //borderColor: '#f00',
            }, {
                from: 20,
                to: 40,
                color: '#b2d942',
                innerRadius: '85%',
                outerRadius: '105%'
            }, {
                from: 40,
                to: 60,
                color: '#e7cb60',
                innerRadius: '85%',
                outerRadius: '105%'
            }, {
                from: 60,
                to: 80,
                color: '#fe9041',
                innerRadius: '85%',
                outerRadius: '105%'
            }, {
                from: 80,
                to: 100,
                color: '#ff5757',
                innerRadius: '85%',
                outerRadius: '105%'
            }]
        },
        plotOptions: {
            gauge: {
                dataLabels: {
                    borderColor: 'transparent',
                },
                dial: {
                    radius: '75%',
                    backgroundColor: '#ccc',
                    borderWidth: 0,
                    baseWidth: 5,
                    topWidth: 1,
                    baseLength: '40%', // of radius
                    rearLength: '0%'
                },
                pivot: {
                    backgroundColor: '#bbb',
                    radius: 7
                }
            }
        },

        series: [{
            name: 'Speed',
            data: [89],
            tooltip: {
                valueSuffix: ' Mbps'
            },
            dataLabels: {
                enabled: true,
                useHTML: true,
                formatter: function () {
                    var mbps = this.y;
                    return '<span class="rpGaugeLabel" style="text-align:center;display:block;">' + mbps + '<span style="font-size:13px;text-align:center;display:block;">Mbps</span></span>';
                },
                style: {
                    fontFamily: 'Roboto',
                    fontWeight: '300',
                    fontSize: '22px',
                    textShadow: '0',
                    color: '#666'
                }
            }
        }]

    });
});

jsFiddle

Upvotes: 1

Views: 2260

Answers (1)

ewolden
ewolden

Reputation: 5803

I changed the pane background to this:

pane: {
  background: null,
  ...
}

And added this plotband:

plotBands: [
...
{
  from: 0,
  to: 100,
  color: '#e7f2f8', 
  innerRadius: '105%',
  outerRadius: '110%'
}]

This takes care of the border.

Moving the dial is difficult. Since it will then have a different arc than the labels. That said, I have done an attempt for you by adding a second pane that houses the dial only.

pane: [
...,
{
  startAngle: -100,
  endAngle: 100,
  center: ['50%', '65%'],
  background: null
}]

Then adding a second yAxis connected to this pane:

yAxis: [
...
{
  pane: 1,
  min: 0,
  max: 100,
  labels: {
    enabled: false
  },
  tickWidth: 0,
  tickLength: 0,
  minorTickWidth: 0,
  minorTickLength: 0,
  lineWidth:0
}]

And finally point the series to use this yAxis:

series: [{
  yAxis: 1,
  ...
}]

The finished chart will then be like this:

$(function() {
  $('#gauge-container').highcharts({
    chart: {
      type: 'gauge',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false,
      backgroundColor: null,
    },
    title: {
      text: null
    },
    background: null,
    credits: {
      enabled: false
    },
    pane: [{
      startAngle: -120,
      endAngle: 120,
      center: ['50%', '50%'],
      background: null,
    }, {
      startAngle: -100,
      endAngle: 100,
      center: ['50%', '65%'],
      background: null
    }],
    yAxis: [{
      min: 0,
      max: 100,
      lineColor: null,
      minorTickInterval: 'auto',
      minorTickWidth: 0,
      minorTickLength: 0,
      minorTickPosition: 'outside',
      minorTickColor: '#fff',
      tickPixelInterval: '30',
      tickWidth: 0,
      tickLength: 0,
      tickPosition: 'inside',
      tickColor: '#fff',
      labels: {
        step: 4,
        distance: -33,
        useHTML: true,
        style: {
          fontFamily: 'Roboto',
          fontWeight: '400',
          fontSize: '18px',
          textShadow: '0',
          color: '#aaaaaa'
        }
      },
      title: {
        text: null
      },
      plotBands: [{
        from: 0,
        to: 20,
        color: '#99cc01',
        innerRadius: '85%',
        outerRadius: '105%',
      }, {
        from: 20,
        to: 40,
        color: '#b2d942',
        innerRadius: '85%',
        outerRadius: '105%'
      }, {
        from: 40,
        to: 60,
        color: '#e7cb60',
        innerRadius: '85%',
        outerRadius: '105%'
      }, {
        from: 60,
        to: 80,
        color: '#fe9041',
        innerRadius: '85%',
        outerRadius: '105%'
      }, {
        from: 80,
        to: 100,
        color: '#ff5757',
        innerRadius: '85%',
        outerRadius: '105%'
      }, {
        from: 0,
        to: 100,
        color: '#e7f2f8',
        innerRadius: '105%',
        outerRadius: '110%'

      }]
    }, {
      pane: 1,
      min: 0,
      max: 100,
      labels: {
        enabled: false
      },
      tickWidth: 0,
      tickLength: 0,
      minorTickWidth: 0,
      minorTickLength: 0,
      lineWidth:0
    }],
    plotOptions: {
      gauge: {
        dataLabels: {
        enabled: true,
        useHTML: true,
        formatter: function() {
          var mbps = this.y;
          return '<span class="rpGaugeLabel" style="text-align:center;display:block;">' + mbps + '<span style="font-size:13px;text-align:center;display:block;">Mbps</span></span>';
        },
        style: {
          fontFamily: 'Roboto',
          fontWeight: '300',
          fontSize: '22px',
          textShadow: '0',
          color: '#666'
        },
          borderColor: 'transparent',
        },
        dial: {
          radius: '95%',
          backgroundColor: '#ccc',
          borderWidth: 0,
          baseWidth: 5,
          topWidth: 1,
          baseLength: '40%', // of radius
          rearLength: '0%'
        },
        pivot: {
          backgroundColor: '#bbb',
          radius: 7
        }
      }
    },
    series: [{
      yAxis: 1,
      name: 'Speed',
      data: [60],
      tooltip: {
        valueSuffix: ' Mbps'
      },
     	
    }]

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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/exporting.js"></script>


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

Fiddle example: https://jsfiddle.net/ewolden/forhwc8h/

Upvotes: 3

Related Questions