CODEWITHSUNDEEP
javascriptamcharts
Torben Pi Jensen
Torben Pi Jensen

Reputation: 870

AMCharts Show bar on zero value

Is it possible to make a "fake" stacked bar graph where the 0 value is pushed i.e. 10px up, so 0 values will have a 10px bar, so the users always have something to click on?

Upvotes: 0

Views: 1316

Answers (1)

xorspark
xorspark

Reputation: 16012

There isn't a property that allows you to do this, however you have a few of workarounds.

You can make your chart 3D by setting the angle and depth3D properties. This gives zero-sized bars more surface area to click on at the axis level. This doesn't work too well with stacked charts, though.

Alternatively, you can add an invisible bullet to your columns. You can specify a bullet shape in your graph and then set the bulletAlpha to 0 so that they're invisible, but still clickable. You can also increase the size by setting bulletSize to a larger number, which increases the hitbox:

  "graphs": [{
    "fillAlphas": 0.9,
    "bullet": "round",
    "bulletSize": 20, //used to increase the hitbox
    "bulletAlpha": 0,
    "type": "column",
    "valueField": "visits"
  },
  // ...
  ]

I created a demo with invisible bullets and visible bullets to illustrate the hitbox and location here. I set the bulletSize to 20 to make it large enough to cover some of the area where the balloon appears so the user can click a round there

As a final alternative, you can create an invisible, non-clustered graph that points to a valueField that corresponds to the largest value from your data. This invisible column will encompass the space above each category up to the value in the valueField, so any the empty space above the columns will trigger a click event as well.

  "dataProvider": [{
    "country": "Netherlands",
    "visits": 665,
    "max": 665
  }, {
    "country": "Russia",
    "visits": 0,
    "max": 665
  },
  // ...
  ],
  "graphs": [{
    // invisible graph - set clustered to false and all other visible properties and interactive properties to 0 or false
    "clustered": false,
    "visibleInLegend": false,
    "fillAlphas": 0,
    "lineAlpha": 0,
    "showBalloon": false,
    "type": "column",
    "valueField": "max"
  }, {
    // real graph
    "fillAlphas": 0.9,
    "type": "column",
    "valueField": "visits"
  }],

Here's a demo of this method.

Upvotes: 0

Related Questions