CODEWITHSUNDEEP
highcharts
Микола Романюк
Микола Романюк

Reputation: 123

How to make bullet higher and bands thinner

I'm playing with bullet chart and can't make bullet higher and bands thinner.

What I have:

original

What I want:

desire

I'm tried set thickness but it's not helps:

plotBands: [
  {
    from: 0,
    to: 50,
    color: "#61Cd8D",
    thickness: '5%'
  }

Here is example: https://jsfiddle.net/e9z5rvat/2/.

Help me please

Upvotes: 0

Views: 263

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

Plot lines occypy the entire height of the plot area, and series is not visible outside of it. As a solution, instead of using plot lines, you can add a stacked column series:

series: [{
    stacking: 'normal',
    type: 'column',
    groupPadding: 0.1,
    pointPadding: 0,
    enableMouseTracking: false,
    data: [{
            x: 0,
            y: 50,
            color: "#61Cd8D"
        },
        {
            x: 0,
            y: 50,
            color: "#E6E4A5"
        },
        {
            x: 0,
            y: 51,
            color: "#F0A434"
        }
    ]
}, {
    data: [{
        y: 0,
        target: 45
    }],
    groupPadding: 0,
    pointPadding: 0,
    targetOptions: { // Options related with look and position of targets
        width: '100%', // The width of the target
        height: 5, // The height of the target
        borderWidth: 0, // The border width of the target
        borderColor: 'black', // The border color of the target
        color: 'black' // The color of the target
    }
}]

Live demo: https://jsfiddle.net/BlackLabel/wjyadh7f/

API Reference: https://api.highcharts.com/highcharts/series.column.groupPadding

Upvotes: 1

Related Questions