Center Google Chart?

Hi,

I am using the Google Chart component. Right now the chart ends up in the upper left-hand corner of the Google Chart component frame. How can I center it in the frame both horizontally and vertically?

Thank you in advance.

Hi, I haven’t used the chart component that much, but adding correct Chart style for the component should work. I think it would look something like body {margin: auto; align-items: center} or maybe use justify-content: center. This depends on your chart, but with a few tries, I think you should be able to move the chart to where you want it to be. Googling different Google chart styles or CSS styles might help here.

I found you can put the D3/Google Chart component in another container to achieve this.

1 Like

also @Tony_Saad

I was never quite able to figure this out.

This is how the graph looks when it first loads:

Then you can zoom in:

It would be great if it started more vertically centered in its component. Also, does anyone know why it is cutting of the very top and far right of the content?? Plus some of the titles on the left hand side are not shown when their space is crowded by the other titles?

I tried using the container it sits in to center, but saw no effect.

This is JavaScript used for the graph:
// function name must be chartExecutor
function chartExecutor() {

  // any Google Charts libraries can be used
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    const data = google.visualization.arrayToDataTable("$chartData");

    const options = {
    curveType: 'function',
      legend: { position: 'bottom' },
      colors: ['#003b4d'],
      chartArea: {
        left: 100,
        top: 1,
        bottom: 1,
      },
    };

    // element ID must be chart_data_div
    const chart = new google.visualization.BarChart(document.getElementById('chart_data_div'));

    chart.draw(data, options);
  }

}

// The chart component consumes the chart function as a string
const funcAsString = chartExecutor.toString();

return { funcAsString }

If anyone has a fix here it would be amazing!

1 Like


@Ryan_Nisbet
page settings >> advanced properties
place component in container

1 Like