highchartsbullet-chart

Tick position not working in highchart bulletchart

X axis tick position and tick interval is not working in highchart bulletchart.

Mentioned below is the relevant code, please check and let me know the issue.

http://jsfiddle.net/uj2k4bds/50/

Highcharts.setOptions({
    chart: {
        inverted: true,
        marginLeft: 135,
        type: 'bullet'
    },
    title: {
        text: null
    },
    legend: {
        enabled: false
    },
    yAxis: {
        gridLineWidth: 0
    },
    plotOptions: {
        series: {
            pointPadding: 0.25,
            borderWidth: 0,
            color: '#304894',
            targetOptions: {
                    color: '#FFFFFF'
            }
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    }
});


Highcharts.chart('container2', {
    xAxis: {
       categories: ['<span class="hc-cat-title">Cap Utilization</span><br/>%'],
       tickPositions: [0, 25, 50, 75, 100, 125, 150, 175] // added tick position here
    },
    yAxis: {
        plotBands: [{
            from: 0,
            to: 60,
            color: '#FFD700'
        }, {
            from: 60,
            to: 85,
            color: '#90EE90'
        }, {
            from: 85,
            to: 150,
            color: '#FA8072'
        }],
        title: null
    },
    series: [{
        data: [{
            y: 135,
            target: 105,
            tickPositions: [0, 25, 50, 75, 100, 125, 150, 175]
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
    }
});

This is my desired result:

enter image description here

Solution

  • The problem is that you are using tickPositions on the xAxis. In a bullet chart the xAxis is vertical, and the yAxis is horizontal. Therefore, by moving the tickPositions you have defined for the xAxis to the yAxis it looks as you want it to.

    Highcharts.setOptions({
    chart: {
        inverted: true,
        marginLeft: 135,
        type: 'bullet'
    },
    title: {
        text: null
    },
    legend: {
        enabled: false
    },
    yAxis: {
        gridLineWidth: 0
    },
    plotOptions: {
        series: {
            pointPadding: 0.25,
            borderWidth: 0,
            color: '#304894',
            targetOptions: {
            		color: '#FFFFFF'
            }
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    }
});

Highcharts.chart('container1', {
    chart: {
        marginTop: 40
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: ['<span class="hc-cat-title">EPKM</span>']
    },
    yAxis: {
        plotBands: [{
            from: 0,
            to: 40,
            color: '#FA8072'
        }, {
            from: 40,
            to: 60,
            color: '#FFD700'
        }, {
            from: 60,
            to: 80,
            color: '#90EE90'
        }],
        title: null
    },
    series: [{
        data: [{
            y: 75,
            target: 72
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
    }
});

Highcharts.chart('container2', {
    xAxis: {
       categories: ['<span class="hc-cat-title">Cap Utilization</span><br/>%'],
       
    },
    yAxis: {
    tickPositions: [0, 25, 50, 75, 100, 125, 150],
        plotBands: [{
            from: 0,
            to: 60,
            color: '#FFD700'
        }, {
            from: 60,
            to: 85,
            color: '#90EE90'
        }, {
            from: 85,
            to: 150,
            color: '#FA8072'
        }],
        title: null
    },
    series: [{
        data: [{
            y: 135,
            target: 105,
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
    }
});


Highcharts.chart('container3', {
    xAxis: {
        categories: ['<span class="hc-cat-title">People Affected</span>']
    },
    yAxis: {
        plotBands: [{
            from: 0,
            to: 1400,
            color: '#FFD700'
        }, {
            from: 1400,
            to: 2000,
            color: '#90EE90'
        }, {
            from: 2000,
            to: 9e9,
            color: '#FA8072'
        }],
        labels: {
            format: '{value}'
        },
        title: null
    },
    series: [{
        data: [{
            y: 1650,
            target: 2100
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
    },
    credits: {
        enabled: false
    }
});
    #container1 {
    max-width: 800px;
    height: 115px;
    margin: 1em auto;
}
#container2, #container3 {
    max-width: 800px;
    height: 85px;
    margin: 1em auto;
}
.hc-cat-title {
  font-size: 13px;
  font-weight: bold;
  padding: 10px
}
    <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

    Working example: http://jsfiddle.net/ewolden/uj2k4bds/64/