Documentation v1.0.0

Charts

---
title: Charts
description: Display data in a visually engaging way using a variety of flexible, responsive chart types designed to fit seamlessly into your theme.
toc: true
---

## Examples

Charts provide a powerful way to visualize data trends, distributions, and comparisons within your application. Using Google Charts, you can create interactive and responsive visualizations that enhance user engagement and make complex data more accessible and comprehensible.

### Line Chart

The line chart is ideal for displaying trends over time, such as changes in website traffic from different countries across years.

<Example class="overflow-auto" html={`<div id="linechart" class="google-chart" style="width: 100%; height: 500px;"></div>`}
js={`document.addEventListener('DOMContentLoaded', function () {
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'United States', 'India', 'China', 'United Kingdom', 'Brazil', 'Japan'],
['2022', 800, 500, 400, 200, 150, 100],
['2023', 900, 600, 450, 220, 180, 120],
['2024', 1050, 700, 520, 260, 220, 140],
['2025', 1200, 800, 600, 300, 250, 200]
]);

var options = {
      title: 'Website Traffic by Country Over Time (hundreds of thousands)',
      curveType: 'function',
      legend: { position: 'bottom' },
      fontName: 'Geist'
    };

var chart = new google.visualization.LineChart(document.getElementById('linechart'));
    chart.draw(data, options);

}
});
`} />

### Bar Chart

Bar charts are effective for comparing quantities among categories, here showing website traffic volumes by country.

<Example class="overflow-auto" html={`<div id="barchart" class="google-chart" style="width: 100%; height: 500px;"></div>`}
js={`document.addEventListener('DOMContentLoaded', function () {
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Country', 'Traffic (hundreds of thousands)'],
['United States', 1200],
['India', 800],
['China', 600],
['United Kingdom', 300],
['Brazil', 250],
['Japan', 200]
]);

var options = {
      title: 'Website Traffic by Country',
      chartArea: {width:'50%'},
      hAxis: {
        title: 'Traffic (hundreds of thousands)',
        minValue: 0
      },
      vAxis: {
        title: 'Country'
      },
      fontName: 'Geist'
    };

var chart = new google.visualization.BarChart(document.getElementById('barchart'));
    chart.draw(data, options);

}
});
`} />

### Pie Chart

Pie charts illustrate proportions, perfect for displaying the distribution of website traffic across various countries.

<Example class="overflow-auto" html={`<div id="piechart" class="google-chart" style="width: 100%; height: 500px;"></div>`}
js={`document.addEventListener('DOMContentLoaded', function () {
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([
      ['Country', 'Traffic (hundreds of thousands)'],
      ['United States', 1200],
      ['India', 800],
      ['China', 600],
      ['United Kingdom', 300],
      ['Brazil', 250],
      ['Japan', 200]
    ]);

var options = {
      title: 'Website Traffic Distribution by Country (hundreds of thousands)',
      fontName: 'Geist'
    };

var chart = new google.visualization.PieChart(document.getElementById('piechart'));

chart.draw(data, options);

}
});
`} />

### GeoChart

Display data across geographical regions using GeoChart component. GeoCharts allow you to visualize information on a map, making it easy to represent country- or region-based metrics like population, sales, or user activity.

<Example class="overflow-auto" html={`<div id="regions_div" class="google-chart" style="width: 100%; height: 500px;"></div>`}
js={`document.addEventListener('DOMContentLoaded', function () {
  google.charts.load('current', {
    'packages':['geochart'],
  });
  google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Traffic (hundreds of thousands)'],
['United States', 1200],
['India', 800],
['China', 600],
['United Kingdom', 300],
['Brazil', 250],
['Japan', 200]
]);

var options = {
      fontName: 'Geist'
    };

var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

chart.draw(data, options);

}
});
`} />

### Customizations

While Google Chart Tools work well out of the box, they also offer a wide range of customization options—such as colors, labels, and interactivity—through chart-specific settings passed as name-value pairs to the `draw()` method.

This example uses the options object to define visual properties of the chart, including a custom font, a specific set of slice colors, and the `is3D` property to display the pie chart with a three-dimensional appearance.

<Example class="overflow-auto" html={`<div id="piechartCustom" class="google-chart" style="width: 100%; height: 500px;"></div>`}
js={`document.addEventListener('DOMContentLoaded', function () {
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var options = {
      title: 'Website Traffic Distribution by Country (hundreds of thousands)',
      fontName: 'Geist',
      colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3a68c', '#f3ab93', '#f3b49f'],
      is3D: true
    };

var chart = new google.visualization.PieChart(document.getElementById('piechartCustom'));

chart.draw(data, options);

}
});
`} />

Display data in a visually engaging way using a variety of flexible, responsive chart types designed to fit seamlessly into your theme.

Examples

Line Chart

The line chart is ideal for displaying trends over time, such as changes in website traffic from different countries across years.

<div id="linechart" class="google-chart" style="width: 100%; height: 500px;"></div>

document.addEventListener('DOMContentLoaded', function () {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'United States', 'India', 'China', 'United Kingdom', 'Brazil', 'Japan'],
['2022', 800, 500, 400, 200, 150, 100],
['2023', 900, 600, 450, 220, 180, 120],
['2024', 1050, 700, 520, 260, 220, 140],
['2025', 1200, 800, 600, 300, 250, 200]
]);

  var options = {
    title: 'Website Traffic by Country Over Time (hundreds of thousands)',
    curveType: 'function',
    legend: { position: 'bottom' },
    fontName: 'Geist'
  };

  var chart = new google.visualization.LineChart(document.getElementById('linechart'));
  chart.draw(data, options);

}
});

Bar Chart

Bar charts are effective for comparing quantities among categories, here showing website traffic volumes by country.

<div id="barchart" class="google-chart" style="width: 100%; height: 500px;"></div>

document.addEventListener('DOMContentLoaded', function () {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Country', 'Traffic (hundreds of thousands)'],
['United States', 1200],
['India', 800],
['China', 600],
['United Kingdom', 300],
['Brazil', 250],
['Japan', 200]
]);

  var options = {
    title: 'Website Traffic by Country',
    chartArea: {width:'50%'},
    hAxis: {
      title: 'Traffic (hundreds of thousands)',
      minValue: 0
    },
    vAxis: {
      title: 'Country'
    },
    fontName: 'Geist'
  };

  var chart = new google.visualization.BarChart(document.getElementById('barchart'));
  chart.draw(data, options);

}
});

Pie Chart

Pie charts illustrate proportions, perfect for displaying the distribution of website traffic across various countries.

<div id="piechart" class="google-chart" style="width: 100%; height: 500px;"></div>

document.addEventListener('DOMContentLoaded', function () {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Country', 'Traffic (hundreds of thousands)'],
    ['United States', 1200],
    ['India', 800],
    ['China', 600],
    ['United Kingdom', 300],
    ['Brazil', 250],
    ['Japan', 200]
  ]);

  var options = {
    title: 'Website Traffic Distribution by Country (hundreds of thousands)',
    fontName: 'Geist'
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  chart.draw(data, options);

}
});

GeoChart

<div id="regions_div" class="google-chart" style="width: 100%; height: 500px;"></div>

document.addEventListener('DOMContentLoaded', function () {
google.charts.load('current', {
  'packages':['geochart'],
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Traffic (hundreds of thousands)'],
['United States', 1200],
['India', 800],
['China', 600],
['United Kingdom', 300],
['Brazil', 250],
['Japan', 200]
]);

  var options = {
    fontName: 'Geist'
  };

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);

}
});

Customizations

This example uses the options object to define visual properties of the chart, including a custom font, a specific set of slice colors, and the is3D property to display the pie chart with a three-dimensional appearance.

<div id="piechartCustom" class="google-chart" style="width: 100%; height: 500px;"></div>

document.addEventListener('DOMContentLoaded', function () {
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Country', 'Traffic (hundreds of thousands)'],
    ['United States', 1200],
    ['India', 800],
    ['China', 600],
    ['United Kingdom', 300],
    ['Brazil', 250],
    ['Japan', 200]
  ]);

  var options = {
    title: 'Website Traffic Distribution by Country (hundreds of thousands)',
    fontName: 'Geist',
    colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3a68c', '#f3ab93', '#f3b49f'],
    is3D: true
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechartCustom'));

  chart.draw(data, options);

}
});

On this page

Charts

Examples

Line Chart

Bar Chart

Pie Chart

GeoChart

Customizations

Admin

Themes

Other