Angular 4 scatter chart with multiple data points using Google charts

Question

Angular 4 scatter chart with multiple data points using Google charts

I'm currently developing a scatter graph in Angular 4 using ng2-google-charts from https://www.npmjs.com/package/ng2-google-charts

It seems like this is essentially a wrapper for Google Chart Service. The graph looks great with a few values, but when I try to plot a larger dataset (around 100 values), the graph ends up looking like this

As you can see, the axes are too small to display the full range of values, making it impossible to see any value on the x-axis.

Is there a solution to this issue?

Please refer to this documentation: https://developers.google.com/chart/interactive/docs/gallery/scatterchart#configuration-options

Attempt: I've tried manually setting the width and height of the chart using configuration, which did work:

chartArea:{width:"80%"},
      height: 500,
      width: 1350

However, is there a way for the chart to automatically adjust its size to fit all values beautifully?

angular typescript npm charts scatter

Answer 1

Answer №1

Here is a helpful tip: utilize the option chartArea to customize the chart's area.

You can expand the chart's area to fill the container, while leaving space on all sides for titles and labels.

// adjust chart area dimensions
chartArea: {
  height: '100%',
  width: '100%',
  top: 48,        // provide space at the top (adjust as needed)
  left: 48,       // provide space on the left side
  right: 16,      // provide space on the right side
  bottom: 48      // provide space at the bottom
},

// set overall chart size
height: '100%',
width: '100%',

In this scenario, it appears that the chart is vertically narrow, so you may need to decrease the font size of the axis labels.

// modify font size for each axis
hAxis: {
  textStyle: {
    fontSize: 9
  }
},
vAxis: {
  textStyle: {
    fontSize: 9
  }
},

Take a look at the following working example:

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var statsData = new google.visualization.DataTable();
  statsData.addColumn('number', 'x');
  statsData.addColumn('number', 'y');
  statsData.addRows([
    [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
    [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
    [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
    [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
    [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
    [66, 70], [67, 72], [68, 75], [69, 80]
  ]);

  var options = {
    // adjust chart area dimensions
    chartArea: {
      height: '100%',
      width: '100%',
      top: 32,        // provide space at the top (adjust as needed)
      left: 24,       // provide space on the left side
      right: 12,      // provide space on the right side
      bottom: 24      // provide space at the bottom
    },

    // set overall chart size
    height: '100%',
    width: '100%',

    // modify font size for each axis
    hAxis: {
      textStyle: {
        fontSize: 9
      }
    },
    vAxis: {
      textStyle: {
        fontSize: 9
      }
    },

    legend: {
      position: 'top'
    }
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

  drawChart();
  window.addEventListener('resize', drawChart, false);
  function drawChart() {
    chart.draw(statsData, options);
  }
});

html, body {
  height: 100%;
  margin: 0px;
  overflow: hidden;
  padding: 0px;
}

.chart {
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>

Answer 2

Here is a helpful tip: utilize the option chartArea to customize the chart's area.

You can expand the chart's area to fill the container, while leaving space on all sides for titles and labels.

// adjust chart area dimensions
chartArea: {
  height: '100%',
  width: '100%',
  top: 48,        // provide space at the top (adjust as needed)
  left: 48,       // provide space on the left side
  right: 16,      // provide space on the right side
  bottom: 48      // provide space at the bottom
},

// set overall chart size
height: '100%',
width: '100%',

In this scenario, it appears that the chart is vertically narrow, so you may need to decrease the font size of the axis labels.

// modify font size for each axis
hAxis: {
  textStyle: {
    fontSize: 9
  }
},
vAxis: {
  textStyle: {
    fontSize: 9
  }
},

Take a look at the following working example:

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var statsData = new google.visualization.DataTable();
  statsData.addColumn('number', 'x');
  statsData.addColumn('number', 'y');
  statsData.addRows([
    [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
    [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
    [48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
    [54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
    [60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
    [66, 70], [67, 72], [68, 75], [69, 80]
  ]);

  var options = {
    // adjust chart area dimensions
    chartArea: {
      height: '100%',
      width: '100%',
      top: 32,        // provide space at the top (adjust as needed)
      left: 24,       // provide space on the left side
      right: 12,      // provide space on the right side
      bottom: 24      // provide space at the bottom
    },

    // set overall chart size
    height: '100%',
    width: '100%',

    // modify font size for each axis
    hAxis: {
      textStyle: {
        fontSize: 9
      }
    },
    vAxis: {
      textStyle: {
        fontSize: 9
      }
    },

    legend: {
      position: 'top'
    }
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

  drawChart();
  window.addEventListener('resize', drawChart, false);
  function drawChart() {
    chart.draw(statsData, options);
  }
});

html, body {
  height: 100%;
  margin: 0px;
  overflow: hidden;
  padding: 0px;
}

.chart {
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>

Angular 4 scatter chart with multiple data points using Google charts

Answer №1

Similar questions

Elementary component placed in a single line

Angular - The filter method cannot be used on Observables

Getting the route parameter in Angular 2 is easy with the stable router

Tips for successfully passing a closure as a parameter in a constructor

Comparing Angular 5 with --aot and Angular 5 with --aot=false configuration settings

Troubleshooting Angular and ASP.NET Core MVC: Addressing the "Uncaught SyntaxError: Unexpected token '<'" issue with index file references post deployment

Is the callback for a request always invoked?

What's the best way to insert values into data binding within a Typescript/ Angular mat Table?

Encountering an installation issue with Angular 2 data table

The assignment to 'total' is prohibited as it is either a constant or a property that is read-only within the get total() function

Created computed getter and setter for Vue models (also known as "props") using the syntax of Vue Class Component

Navigating the interface types between Angular, Firebase, and Typescript can be tricky, especially when working with the `firebase.firestore.FieldValue`

Steps for synchronously making multiple http calls at various levels in Angular 2 using RxJS

Is it possible to export all types/interfaces from .d.ts files within multiple folders using index.ts in a React TypeScript project?

It appears that Typescript mistakenly interprets a class or type as a value, indicating that "'Classname' is being referred to as a value but used as a type here."

When retrieving an npm module from GitHub, the process includes the download of the ".git" folder

Mapped TypeScript type requiring scalar properties and allowing optional objects

Issue with TypeScript not detecting exported Firebase Cloud Functions

Utilizing External Libraries Added Through <script> Tags in React

What is the proper way to invoke the correct store 'collection' using ngrx-store?