Node Permanently Moved


    1.0.4 • Public • Published



    This package allows you to render Google Charts on the server as PNG images. It's part of QuickChart, which offers a suite of tools for rendering charts & graphs as images.

    It is based on the Google Visualization API and is made possible through the use of puppeteer, which uses the Chromium browser for "headless" rendering.

    For a more detailed walkthrough, see Server-side image rendering for Google Charts on QuickChart.


    This project is available on NPM.

    npm install google-charts-node


    const GoogleChartsNode = require('google-charts-node');
    // Define your chart drawing function
    function drawChart() {
      const data = google.visualization.arrayToDataTable([
        ['City', '2010 Population',],
        ['New York City, NY', 8175000],
        ['Los Angeles, CA', 3792000],
        ['Chicago, IL', 2695000],
        ['Houston, TX', 2099000],
        ['Philadelphia, PA', 1526000]
      const options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Total Population',
          minValue: 0
        vAxis: {
          title: 'City'
      const chart = new google.visualization.BarChart(container);
      chart.draw(data, options);
    // Render the chart to image
    const image = await GoogleChartsNode.render(drawChart, {
      width: 400,
      height: 300,

    This produces the following image:

    Google Charts Image

    The only requirements of your drawChart function are that you must:

    • Define a chart variable or return your chart.
    • Use the provided container variable to render your chart.

    Example with arguments

    To use outside values in your drawChart function, call render with a Javascript string. Here's an example:

    const myArg = 12345;
    const myOtherArg = [5, 10, 15, 20];
    const drawChartStr = `
      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
        ['Mushrooms', ${myArg}],
        ['Onions', ${myOtherArg[0]}],
        ['Olives', ${myOtherArg[1]}],
        ['Zucchini', ${myOtherArg[2]}],
        ['Pepperoni', ${myOtherArg[3]}],
      // Set chart options
      var options = { title: 'How Much Pizza I Ate Last Night' };
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    const image = await GoogleChartsNode.render(drawChartStr, {
      width: 400,
      height: 300,


    render(drawChartFunction, options) -> Buffer

    The library exposes a single function, render.

    drawChartFunction is a Function or Javascript string that is evaluated in order to draw the chart. You should put your regular drawChart Google Charts function here.

    options is a dictionary containing some settings and parameters:

    • width: Width of chart canvas (default 100%)
    • height: Height of chart canvas (default 100%)
    • packages: Array of Google Charts packages to import (default ['corechart'])
    • mapsApiKey: Google Maps API key (used only for geochart and map charts)

    More examples

    See the examples/ directory for more examples of different charts.




    npm i google-charts-node

    DownloadsWeekly Downloads






    Unpacked Size

    21.8 kB

    Total Files


    Last publish


    • ianw