Search code examples
javascripthighchartsbullet-chart

Bullet Chart in Series not displaying after y value

After setting the y value of yAxis the rest of the bar doesn't appear. Eg. In the code I set the y value to 20 but after 20 there is nothing. So What I am trying to do is extend the all the line until max value and keep 20 .

Screen Shoot

Screen Shoot

Highcharts.chart("container1", {
  chart: {
    marginTop: 40
  },
  title: {
    text: "Gauge Bar Chart"
  },
  xAxis: {
    categories: [
      '<span class="hc-cat-title">Revenue</span><br/>U.S. $ (1,000s)'
    ]
  },
  yAxis: {
    plotBands: [
      {
        from: 0,
        to: 1400,
        color: "#ffffff"
      }
    ],
    labels: {
      format: "{value}%"
    },
    title: null,
    max: 100,
    visible: true
  },

  series: [
    {
      animation: false,
      data: [
        {
          y: 20,
          target: 40
        }
      ]
    }
  ],

https://jsfiddle.net/mrtcnkrks/df1zbL9m/

My Goal is have background until 100% hereScreen Shoot

Solution

  • You can add plotBands to the all xAxis, for example:

    xAxis: {
    ...,
    plotBands: [{
        from: -0.18,
        to: 0.15,
        color: "gray"
    }]
},

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

    API Reference: https://api.highcharts.com/highcharts/yAxis.plotBands