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 https://i.sstatic.net/5Gzfn.png

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

Is there an alternative course of action since determining if Observable is empty is not feasible?

What is the most effective approach to handling dependencies for an AngularJs 1.x web application?

What could be causing the invalid_client error in response to this POST request I am making?

Tips for validating the request body prior to sending in Angular unit testing

Vue textarea not accepting null values

Angular 14 is experiencing issues with NgRx Store failing to properly recognize the payload

Tips for displaying dynamic data using innerHTML

This TypeScript error occurs when the props are not compatible and cannot be assigned to

How can I position ports on the right side of a graph element in JointJS?

Is it possible to use data retrieved from an API in Angular Url Matcher to determine if the matcher should be considered true or not based on the API response?

No routes found for URL segment 'master-system/update-system'

Encountering a problem while attempting to incorporate SQLite into a Node.js environment

The dilemma between installing Electron or installing Electron-Builder: which one

Encountering an issue when trying to download a PDF from an Angular 6 frontend using a Spring Boot API - receiving an error related to

Sending emails using Angular 4 and PHP

Ensuring the Presence of a Legitimate Instance in NestJS

Cloud9 encounters NPM update issue with error message 'npm log' module cannot be found

How can I access the object that created an interval from inside an interval callback function?

Differences between Pipe and Tap when working with ngxsWhen working with

Angular Material calendar tool customization for designated input