CODEWITHSUNDEEP
chartsgoogle-visualization
Kaushik Thanki
Kaushik Thanki

Reputation: 3540

The google chat is not showing last tick on chart

The problem is that last date is not showing as tick even it has value & tick.

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable(
          [
            ["Month Day", "New User"],
            [new Date(2020, 9, 1), 4064],
            [new Date(2020, 9, 2), 3415],
            [new Date(2020, 9, 3), 2071],
            [new Date(2020, 9, 4), 397],
            [new Date(2020, 9, 5), 1425],
            [new Date(2020, 9, 6), 4848],
            [new Date(2020, 9, 7), 667]
          ]);

        var options = {
          vAxis: {
            gridlines: {
              color: "transparent"
            },
            format: "#,###",
            baseline: 0,
          },
          hAxis: {
            format: "dd MMM",
            gridlines: {
              color: "transparent"
            },
            "ticks": [
              new Date(2020, 9, 1),
              new Date(2020, 9, 2),
              new Date(2020, 9, 3),
              new Date(2020, 9, 4),
              new Date(2020, 9, 5),
              new Date(2020, 9, 6),
              new Date(2020, 9, 7)
            ]
          },
          height: 300,
          legend: "none",
          chartArea: {
            height: "85%",
            width: "92%",
            bottom: "11%",
            left: "10%"
          },
          colors: ["#85C1E9"],

        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

If I add extra date for tick it looks odd on chart.

Is there any way to show last tick date on chart xAxis ?

https://jsfiddle.net/hu3wm0jn/

Upvotes: 1

Views: 125

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

just need to allow enough room on the right side of the chart for the label to appear

see updated chartArea options...

chartArea: {
  left: 64,
  top: 48,
  right: 48,
  bottom: 64,
  height: '100%',
  width: '100%'
},
height: '100%',
width: '100%',

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["Month Day", "New User"],
    [new Date(2020, 9, 1), 4064],
    [new Date(2020, 9, 2), 3415],
    [new Date(2020, 9, 3), 2071],
    [new Date(2020, 9, 4), 397],
    [new Date(2020, 9, 5), 1425],
    [new Date(2020, 9, 6), 4848],
    [new Date(2020, 9, 7), 667]
  ]);

  var options = {
    vAxis: {
      gridlines: {
        color: "transparent"
      },
      format: "#,###",
      baseline: 0,
    },
    hAxis: {
      format: "dd MMM",
      gridlines: {
        color: "transparent"
      },
      ticks: [
        new Date(2020, 9, 1),
        new Date(2020, 9, 2),
        new Date(2020, 9, 3),
        new Date(2020, 9, 4),
        new Date(2020, 9, 5),
        new Date(2020, 9, 6),
        new Date(2020, 9, 7)
      ]
    },
    legend: "none",
    chartArea: {
      left: 64,
      top: 48,
      right: 48,
      bottom: 64,
      height: '100%',
      width: '100%'
    },
    height: '100%',
    width: '100%',
    colors: ["#85C1E9"]
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});
html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#chart_div {
  min-height: 500px;
  height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions