Jump to content
  • 0

Reduce/remove extra space on sides of bar chart?


TDNgromak
 Share

Question

I'm generating a chart with eight vertical bars of information. Caspio's chart generation engine is making a chart where there is the equivalent of three bars' worth of empty space to the left and to the right of the actual bars, and it retains this relative amount of space at whatever browser width the chart is viewed at (making for some very narrow vertical bars and smashed together data labels at lower widths and screen sizes). Caspio support tells me this display is expected behavior (despite the fact that all of their documentation for creating charts contain sample images of charts that do not contain this ridiculous amount of right- and left-padding).

I see nothing in the Charts area of the Styles menu to adjust this behavior (I'm seeing only the ability to affect the border color, background, chart title, and chart subtitle).

If I inspect the chart, it is not generated in standard html, so I appear unable to simply write styles that would override the width of the container that holds the actual bars, which appears to be "<g class="highcharts-series-group>."

Does anybody know if there's any way to fix this? Thanks in advance.

caspio-bar-chart-lotsa-space.png

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

I agree with TDNGromac

Strange to see that their demo charts are nicely spread, but in reality they are crowded.

I have the same problem. This is something that should be solved.

Having the problem solved with JS is in contradiction with Caspio's value proposition "Build Cloud Database Apps Without Coding! "

...

 

 

Link to comment
Share on other sites

  • 1

Hello @TDNgromak

Under the hood, Caspio uses the Highcharts library to render charts.

To change the layout of the Chart you need to use Highcharts.update() method. Here is the example - https://www.highcharts.com/demo/chart-update
You may use the documentation of Highcharts to find the appropriate property to change the align of the columns.

Here is the example of JS code on how to change colors of the  donut chart:

<script type="text/javascript">
document.addEventListener('DataPageReady', chartUpdateHandler)

function chartUpdateHandler(event) {

 var cleaner = function(interv) {
  clearInterval(interv);
 }

 let interv = setInterval(() => {
  let colors = [];
  
  for(let i = 0; i < Highcharts.charts[0].series[0].data.length; i++) {
   if(Highcharts.charts[0].series[0].data[i].name === "Value_1") {
    colors.push("#00FF00");
   } else if (Highcharts.charts[0].series[0].data[i].name === "Value_2") {
    colors.push("#FF0000");
   }
  }

  if (!!Highcharts) {
   Highcharts.charts[0].update({
    plotOptions: {
     pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      colors: colors
     }    
    }
   });   
   cleaner(interv);
  }
 }, 200);
}
</script>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...