Reduce/remove extra space on sides of bar chart?

[TDNgromak]

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.

[Johan]

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! "

...

 

 

[Hastur]

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>

 

[Johan]

Double entry

[kpcollier]

These charts are extremely outdated and filled with bugs... Needing to use JS to make the graph look acceptable is hilarious for a No Code platform in 2023. 

[kpcollier]

On 2/14/2021 at 8:32 AM, Johan said:

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

But hey, you can spend outrageous amounts of money with their Professional Services team to get it to look like the charts that they advertise in their blogs!  

This is sarcasm...

If they advertise something, specially as a no code solution, us customers should be able to replicate it with little issue. This is a lot like Caspio's Calendars. Seems fishy.

[Tubby]

22 hours ago, kpcollier said:

But hey, you can spend outrageous amounts of money with their Professional Services team to get it to look like the charts that they advertise in their blogs!  

This is sarcasm...

If they advertise something, specially as a no code solution, us customers should be able to replicate it with little issue. This is a lot like Caspio's Calendars. Seems fishy.

Yeah that's kind of a bummer. Caspio seems to be not using an in-house chart solution so even their support might have a difficult time finding a way to customize those charts. I think they are using HighCharts https://www.highcharts.com/

Basically you either use those type of datapages bare or not use them at all

[kpcollier]

On 2/2/2023 at 3:11 PM, Tubby said:

Basically you either use those type of datapages bare or not use them at all

Definitely a bummer. They show different chart solutions on their Tutorial page for charts as well. Not possible to make the bar charts look like that with standard Caspio features, not sure why it'd be on the How To page. Hard to tell a client "Yeah, I know Caspio is displaying those charts on their pages, but we cannot make them look like that."

[Tubby]

On 2/3/2023 at 4:22 PM, kpcollier said:

Definitely a bummer. They show different chart solutions on their Tutorial page for charts as well. Not possible to make the bar charts look like that with standard Caspio features, not sure why it'd be on the How To page. Hard to tell a client "Yeah, I know Caspio is displaying those charts on their pages, but we cannot make them look like that."

@kpcollier you might want to see this post of mine about a discovery in charts just in case it helps you in some way