cyberangles blog

How to Center Align Title in Google Charts API Line Chart: Fix for Missing titlePosition Option

Google Charts API is a powerful tool for creating interactive and visually appealing charts, including line charts, bar charts, and pie charts. Line charts, in particular, are widely used to visualize trends over time. However, one common frustration among developers is the inability to center-align the chart title—Google Charts does not natively support a titlePosition or titleAlignment option. By default, titles are left-aligned, which can disrupt the visual balance of your chart, especially in dashboards or reports where centered titles are preferred for clarity and aesthetics.

In this blog, we’ll explore two reliable workarounds to center-align the title in a Google Charts line chart. We’ll cover methods using CSS/SVG manipulation and custom HTML overlays, with step-by-step examples to ensure you can implement the solution quickly.

2025-12

Table of Contents#

  1. Understanding the Problem: Why Centering the Title Is Tricky
  2. Prerequisites
  3. Step-by-Step Guide to Center Align the Title
  4. Troubleshooting Common Issues
  5. Conclusion
  6. References

Understanding the Problem: Why Centering the Title Is Tricky#

Google Charts renders charts as Scalable Vector Graphics (SVG), a markup language for vector images. The title is generated as a <text> element within this SVG. Unlike HTML, SVG elements are positioned using coordinates, and Google Charts does not expose a configuration option to adjust the title’s alignment.

By default, the title’s <text> element has:

  • text-anchor: start (left-aligned),
  • A fixed x position (e.g., x="0"),
  • And no built-in way to dynamically center it relative to the chart’s width.

To center the title, we need to either:

  1. Modify the SVG <text> element’s attributes (e.g., x position and text-anchor) using CSS/JavaScript, or
  2. Replace the default SVG title with a custom HTML element that we can style and position freely.

Prerequisites#

Before starting, ensure you have:

  • Basic knowledge of HTML, CSS, and JavaScript.
  • A code editor (e.g., VS Code, Sublime Text).
  • Access to the Google Charts API (via the official CDN).

Step-by-Step Guide to Center Align the Title#

We’ll walk through two methods to center-align the title. Choose the one that best fits your use case!

Method 1: Using CSS to Target the SVG Title Element#

This method directly modifies the SVG <text> element generated by Google Charts. We’ll use JavaScript to dynamically adjust the title’s position and alignment after the chart is drawn.

Step 1: Create a Basic Line Chart#

First, set up a simple line chart with a title. Here’s a minimal example:

<!DOCTYPE html>
<html>
<head>
  <title>Center Title in Google Line Chart</title>
  <!-- Load Google Charts API -->
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    // Load the Visualization API and corechart package
    google.charts.load('current', {'packages':['corechart']});
    // Set a callback to run when the API is loaded
    google.charts.setOnLoadCallback(drawChart);
 
    function drawChart() {
      // Sample data
      const data = google.visualization.arrayToDataTable([
        ['Month', 'Sales'],
        ['Jan', 1000],
        ['Feb', 1170],
        ['Mar', 660],
        ['Apr', 1030],
        ['May', 1090],
        ['Jun', 1230]
      ]);
 
      // Chart options (include a title)
      const options = {
        title: 'Monthly Sales Trend 2023', // Default left-aligned title
        curveType: 'function',
        legend: { position: 'bottom' },
        width: 800,
        height: 400
      };
 
      // Draw the chart in the "chart_div" container
      const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div" style="margin: 0 auto;"></div>
</body>
</html>

Run this code, and you’ll see a line chart with a left-aligned title: "Monthly Sales Trend 2023".

Step 2: Inspect the SVG Title Element#

Right-click the title and select "Inspect" to view the SVG structure. Google Charts assigns the title a class: google-visualization-title. The element looks like this:

<text x="0" y="0" class="google-visualization-title" font-size="16" font-weight="bold">Monthly Sales Trend 2023</text>

Step 3: Dynamically Center the Title with JavaScript#

After drawing the chart, we’ll use JavaScript to:

  • Select the title element by its class.
  • Set text-anchor: middle (centers text horizontally relative to its x position).
  • Set x to 50% of the chart’s width (centers the title relative to the chart container).

Update the drawChart function to include a "ready" event listener (to ensure the chart is fully rendered before modifying the title):

function drawChart() {
  const data = google.visualization.arrayToDataTable([
    ['Month', 'Sales'],
    ['Jan', 1000],
    ['Feb', 1170],
    ['Mar', 660],
    ['Apr', 1030],
    ['May', 1090],
    ['Jun', 1230]
  ]);
 
  const options = {
    title: 'Monthly Sales Trend 2023',
    curveType: 'function',
    legend: { position: 'bottom' },
    width: 800,
    height: 400
  };
 
  const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
 
  // Wait for the chart to be "ready" before modifying the title
  google.visualization.events.addListener(chart, 'ready', function() {
    // Select the title element
    const title = document.querySelector('.google-visualization-title');
    if (title) {
      // Get the chart container's width
      const containerWidth = document.getElementById('chart_div').offsetWidth;
      // Center the title: set x to 50% of container width, text-anchor to middle
      title.setAttribute('x', containerWidth / 2);
      title.setAttribute('text-anchor', 'middle');
    }
  });
 
  chart.draw(data, options);
}

How It Works#

  • The ready event ensures we modify the title only after the chart is fully rendered.
  • document.querySelector('.google-visualization-title') targets the title’s SVG <text> element.
  • containerWidth / 2 sets the x position to the horizontal center of the chart container.
  • text-anchor: middle aligns the text’s midpoint with the x position, centering it.

Method 2: Using a Custom HTML Title Overlay#

If you prefer more control over styling (e.g., fonts, colors, or responsiveness), disable the default SVG title and use a custom HTML element positioned above the chart.

Step 1: Disable the Default Title#

In the chart options, set title: null to hide the default SVG title:

const options = {
  title: null, // Disable default title
  curveType: 'function',
  legend: { position: 'bottom' },
  width: 800,
  height: 400
};

Step 2: Add a Custom HTML Title#

Add a <div> above the chart container to act as the title. Style it with CSS to center-align:

<body>
  <!-- Custom centered title -->
  <div id="custom-title" style="text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 10px;">
    Monthly Sales Trend 2023
  </div>
  <!-- Chart container -->
  <div id="chart_div" style="margin: 0 auto;"></div>
</body>

Step 3: (Optional) Match Chart Styling#

To make the custom title match Google Charts’ default styling, use these CSS properties:

#custom-title {
  font-family: Arial, sans-serif;
  font-size: 16px; /* Default Google Charts title size */
  font-weight: bold;
  color: #222; /* Default text color */
  margin: 0 0 10px 0; /* Spacing below title */
  text-align: center;
}

Advantages#

  • Full control over styling (fonts, colors, padding).
  • No dependency on SVG class names (avoids issues if Google Charts changes its SVG structure).
  • Easier to make responsive (e.g., using max-width: 100% on the title container).

Troubleshooting Common Issues#

Issue 1: Title Not Centering (Method 1)#

  • Cause: The google-visualization-title class may have changed in a Google Charts update.
  • Fix: Re-inspect the SVG title element to confirm the class name. As of 2024, the class is still google-visualization-title, but always verify!

Issue 2: Title Misaligned on Window Resize (Method 1)#

  • Cause: The chart container width changes on resize, but the title’s x position remains fixed.
  • Fix: Add a window resize listener to re-center the title:
// Add this inside the drawChart function, after the "ready" listener
window.addEventListener('resize', function() {
  const title = document.querySelector('.google-visualization-title');
  if (title) {
    const containerWidth = document.getElementById('chart_div').offsetWidth;
    title.setAttribute('x', containerWidth / 2);
  }
});

Issue 3: Custom Title Overlaps Chart (Method 2)#

  • Cause: The chart’s height option includes space for the default title, which is now hidden.
  • Fix: Reduce the chart’s height by ~30px (the default title’s height) to make room for the custom title:
const options = {
  title: null,
  height: 370, // Reduced by 30px to avoid overlap
  // ... other options
};

Conclusion#

Centering the title in a Google Charts line chart is achievable with a few lines of JavaScript or HTML/CSS. Method 1 (SVG manipulation) is best for quick integration with minimal code, while Method 2 (custom HTML title) offers more styling flexibility. Both workarounds solve the missing titlePosition option and ensure your charts look polished and professional.

References#