CODEWITHSUNDEEP
javascriptcssangularjshighcharts
Guillaume Roche-Bayard
Guillaume Roche-Bayard

Reputation: 447

highcharts value doesn't fit container

I'm trying to use highcharts with angular using the highcharts-ng wrapper. The problem is that with the gauge type i can't get the value to fit in my container.

I did a fiddle to make it more clear : http://jsfiddle.net/x1zhmgg5/

What i want to achieve is to get my color bar to fit in the grey one, not the other way around (which would just mean getting a wider outerRadius on the pane.background) : 

pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
    }
},

I've been going through the highchart documentation but I couldn't find anything on the yAxis to fix it.

Upvotes: 0

Views: 380

Answers (1)

Miguel Trabajo
Miguel Trabajo

Reputation: 467

Alter the plotOptions to this:

plotOptions: {
    solidgauge: {
        dataLabels: {
            y: 1,
            borderWidth: 5,
            useHTML: true
        },
        innerRadius: '60%', // <--
        radius: '70%',      // <-- I don't know why it isn't outerRadius too...
    }
}

Upvotes: 1

Related Questions