How to provide padding to the tickPosition on highchart?

Question

I am using bullet chart of highchartto work alike progress chart somehow i achieved to make it look like as a progress chart, but the problem is that when my series data is near to equal it gets overlapped with each other. Please take a look attached image

is there any way to provide padding on bullet chart so the data will not get overlapped?

$("#progress").highcharts({
        chart: {
            inverted: true,
            marginLeft: 30,
            type: 'bullet'
        },
        title: {
            text: null
        },
        legend: {
            enabled: false
        },
        yAxis: {
            tickPositions: [0, 3000, 3100, 4000],
            gridLineWidth: 0,
            title: "",
            useHTML: true,//Set to true
            style: {
                width: '50px'
            }
        }, xAxis: {
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            labels: {
                enabled: false
            },
            minorTickLength: 0,
            tickLength: 0
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                borderRadius: 10,
                color: '#819bc2',
                targetOptions: {
                    width: '10%'
                },
                grouping: false
            }
        },
        exporting: { enabled: false },
        credits: { enabled: false },
        series: [{ "data": [{ "y": 4000, "target": 4000, "color": "#ccd8e9" }] }, { "data": [{ "y": 3100, "target": 3100, "color": "#ff4666" }] }, { "data": [{ "y": 3000, "target": 3000, "color": "#2F9AD0" }] }],
        tooltip: {
            useHTML: true,
            backgroundColor: null,
            borderWidth: 0,
            positioner: function (labelWidth, labelHeight, point) {
                var tooltipX = point.plotX - 40;
                var tooltipY = point.plotY - 20;
                return {
                    x: tooltipX,
                    y: tooltipY
                };
            },
            pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
     <script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>

You could also use [**rotation**](https://api.highcharts.com/highcharts/yAxis.labels.rotation): https://jsfiddle.net/ewolden/jgezt8xm/7/ or [**staggerLines**](https://api.highcharts.com/highcharts/yAxis.labels.staggerLines): https://jsfiddle.net/ewolden/jgezt8xm/5/. — ewolden, Aug 21 '18 at 07:52

score 0 · Answer 1 · answered Aug 21 '18 at 07:42

I made this solution with jQuery. There might be better ones, but it should work as wished:

var lastXPos = 0;
$.each($('#progress svg g text'),function(a,b)
{
  var curXPos = $(this).offset().left;
  if(curXPos - lastXPos < 50)
  {
    $(this).attr('x', (curXPos + 50));
  }
  lastXPos = curXPos;
});

When the last x-position of the text is within 50px of the current x-position, I just add another 50px to the current position. You can change this values according to your needs.

$("#progress").highcharts({
        chart: {
            inverted: true,
            marginLeft: 30,
            type: 'bullet'
        },
        title: {
            text: null
        },
        legend: {
            enabled: false
        },
        yAxis: {
            tickPositions: [0, 3000, 3100, 4000],
            gridLineWidth: 0,
            title: "",
            useHTML: true,//Set to true
            style: {
                width: '50px'
            }
        }, xAxis: {
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            labels: {
                enabled: false
            },
            minorTickLength: 0,
            tickLength: 0
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                borderRadius: 10,
                color: '#819bc2',
                targetOptions: {
                    width: '10%'
                },
                grouping: false
            }
        },
        exporting: { enabled: false },
        credits: { enabled: false },
        series: [{ "data": [{ "y": 4000, "target": 4000, "color": "#ccd8e9" }] }, { "data": [{ "y": 3100, "target": 3100, "color": "#ff4666" }] }, { "data": [{ "y": 3000, "target": 3000, "color": "#2F9AD0" }] }],
        tooltip: {
            useHTML: true,
            backgroundColor: null,
            borderWidth: 0,
            positioner: function (labelWidth, labelHeight, point) {
                var tooltipX = point.plotX - 40;
                var tooltipY = point.plotY - 20;
                return {
                    x: tooltipX,
                    y: tooltipY
                };
            },
            pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
        }
    });
    var lastXPos = 0;
    $.each($('#progress svg g text'),function(a,b)
    {
      var curXPos = $(this).offset().left;
      if(curXPos - lastXPos < 50)
      {
        $(this).attr('x', (curXPos + 50));
      }
      lastXPos = curXPos;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
     <script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>

score 0 · Answer 2 · answered Aug 21 '18 at 09:45

You can use rotation option for yaxis label for not overlapping the text

$("#progress").highcharts({
        chart: {
            inverted: true,
            marginLeft: 30,
            type: 'bullet'
        },
        title: {
            text: null
        },
        legend: {
            enabled: false
        },
        yAxis: {
            tickPositions: [0, 3000, 3100, 4000],
            gridLineWidth: 0,
            title: "",
            useHTML: true,//Set to true
           
            labels: {
                rotation : 320
            },
            
        }, xAxis: {
            minorGridLineWidth: 0,
            lineColor: 'transparent',
           
            minorTickLength: 0,
            tickLength: 0,
        },
        allowOverlap : false,
        padding : 10,
        plotOptions: {
            series: {
                borderWidth: 0,
                borderRadius: 10,
                color: '#819bc2',
                targetOptions: {
                    width: '10%'
                },
                
                grouping: false
            }
        },
        exporting: { enabled: false },
        credits: { enabled: false },
        series: [{ "data": [{ "y": 4000, "target": 4000, "color": "#ccd8e9" }] }, { "data": [{ "y": 3100, "target": 3100, "color": "#ff4666" }] }, { "data": [{ "y": 3000, "target": 3000, "color": "#2F9AD0" }] }],
        tooltip: {
            useHTML: true,
            backgroundColor: null,
            borderWidth: 0,
            positioner: function (labelWidth, labelHeight, point) {
                var tooltipX = point.plotX - 40;
                var tooltipY = point.plotY - 20;
                return {
                    x: tooltipX,
                    y: tooltipY
                };
            },
            pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
     <script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>

score 0 · Answer 3 · answered Aug 21 '18 at 10:09

Padding does not work for the labels on your yAxis. This is probably a sideeffect of using tickPositions

An array defining where the ticks are laid out on the axis. This overrides the default behaviour of tickPixelInterval and tickInterval.

As an alternative solution you can use rotation:

yAxis: {
  labels: {
    rotation: -45
  },
...
}

$("#progress").highcharts({
  chart: {
    inverted: true,
    marginLeft: 30,
    type: 'bullet'
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  yAxis: {
    tickPositions: [0, 3000, 3100, 4000],
    gridLineWidth: 0,
    title: "",
    labels: {
      rotation: -45
    }
  },
  xAxis: {
    minorGridLineWidth: 0,
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    minorTickLength: 0,
    tickLength: 0
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      borderRadius: 10,
      color: '#819bc2',
      targetOptions: {
        width: '10%'
      },
      grouping: false
    }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    "data": [{
      "y": 4000,
      "target": 4000,
      "color": "#ccd8e9"
    }]
  }, {
    "data": [{
      "y": 3100,
      "target": 3100,
      "color": "#ff4666"
    }]
  }, {
    "data": [{
      "y": 3000,
      "target": 3000,
      "color": "#2F9AD0"
    }]
  }],
  tooltip: {
    useHTML: true,
    backgroundColor: null,
    borderWidth: 0,
    positioner: function(labelWidth, labelHeight, point) {
      var tooltipX = point.plotX - 40;
      var tooltipY = point.plotY - 20;
      return {
        x: tooltipX,
        y: tooltipY
      };
    },
    pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>

JSFiddle example: https://jsfiddle.net/ewolden/jgezt8xm/7/

You can also use staggerLines:

yAxis: {
  labels: {
    staggerLines: 2
  },
...
}

$("#progress").highcharts({
  chart: {
    inverted: true,
    marginLeft: 30,
    type: 'bullet'
  },
  title: {
    text: null
  },
  legend: {
    enabled: false
  },
  yAxis: {
    tickPositions: [0, 3000, 3100, 4000],
    gridLineWidth: 0,
    title: "",
    labels: {
      staggerLines: 2
    }
  },
  xAxis: {
    minorGridLineWidth: 0,
    lineColor: 'transparent',
    labels: {
      enabled: false
    },
    minorTickLength: 0,
    tickLength: 0
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      borderRadius: 10,
      color: '#819bc2',
      targetOptions: {
        width: '10%'
      },
      grouping: false
    }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    "data": [{
      "y": 4000,
      "target": 4000,
      "color": "#ccd8e9"
    }]
  }, {
    "data": [{
      "y": 3100,
      "target": 3100,
      "color": "#ff4666"
    }]
  }, {
    "data": [{
      "y": 3000,
      "target": 3000,
      "color": "#2F9AD0"
    }]
  }],
  tooltip: {
    useHTML: true,
    backgroundColor: null,
    borderWidth: 0,
    positioner: function(labelWidth, labelHeight, point) {
      var tooltipX = point.plotX - 40;
      var tooltipY = point.plotY - 20;
      return {
        x: tooltipX,
        y: tooltipY
      };
    },
    pointFormat: "<span style='font-weight:bold;color:{point.color};'>{point.y}</span>"
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>

<div id="progress"></div>

JSFiddle example: https://jsfiddle.net/ewolden/jgezt8xm/5/

How to provide padding to the tickPosition on highchart?

3 Answers3