Set minimum height or width for column FusionCharts

Question

If data is very lower than others, it's almost like zero, and the user can't click or hover because it's too small.

How can I set a minimum height or width for very small numbers?

I have this problem with ApexCharts too.

  const chartConfigs = {
    type: "column2d",
    width: "100%",
    height: 500,
    dataFormat: "json",
    dataSource: {
      chart: {
        caption: "Countries With Most Oil Reserves [2017-18]",
        subCaption: "In MMbbl = One Million barrels",
        xAxisName: "Country",
        yAxisName: "Reserves (MMbbl)",
        numberSuffix: "K",
        theme: "fusion",
      },
      data: [
        {
          label: "Venezuela",
          value: "290",
        },
        {
          label: "Saudi",
          value: "260",
        },
        {
          label: "Canada",
          value: "180",
        },
        {
          label: "Iran",
          value: "140",
        },
        {
          label: "Russia",
          value: "115",
        },
        {
          label: "UAE",
          value: "100",
        },
        {
          label: "US",
          value: "3000000",
        },
        {
          label: "China",
          value: "30",
        },
      ],
    },
  };

Answer 1

This is normal since your y-axis scale is linear if one of your plots has a very large value & the other plot values are very low compared to the large plot value then the plot area of the smaller value plot will be very minimum.

To overcome this you can use logarithmic y-axis, here is an example -

FusionCharts.ready(function() {
  var footfallChart = new FusionCharts({
    type: 'logmscolumn2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Store footfall vs Online visitors ",
        "subCaption": "Last Year",
        "xAxisName": "Quarter",
        "yAxisName": "No of visitors",
        "showXAxisLine": "1",
        "axisLineAlpha": "10"
      },
      "categories": [{
        "category": [{
            "label": "Q1"
          },
          {
            "label": "Q2"
          },
          {
            "label": "Q3"
          },
          {
            "label": "Q4"
          }
        ]
      }],
      "dataset": [{
        "seriesname": "Total footfalls",
        "data": [{
            "value": "126734"
          },
          {
            "value": "64"
          },
          {
            "value": "34"
          },
          {
            "value": "56"
          },
          {
            "value": "78"
          }
        ]
      }]


    }
  }).render();

});

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="chart-container">FusionCharts will render here</div>

Answer 2

You can adjust it with maxBarHeight and plotPaddingPercent.

Answer 3

You can set the width of the bars by using the "plotSpacePercent" chart attribute.

plotSpacePercent: 70 

By using the maxBarHeight attribute you can have better control over the bar height

"maxBarHeight" : "10"   // <----  use MaxBarHeight to set max value in px