CODEWITHSUNDEEP
reactjschartsgoogle-visualization
NelbeDG
NelbeDG

Reputation: 445

How can I add a vertical line on the X axis in a Google Chart' chart (Line type)?

I'm working with react and Google Charts and I just found a problem that I can not find the solution for.

I have this component

<Chart chartType='Line' data={data} options={options} />

And here are the values to data and options:

const data = [
        ["Year", "Value"],
        ["2020", 48.92],
        ["2025", 49.45],
        ["2030", 49.24],
        ["2035", 50.93],
        ["2040", 49.62],
        ["2025", 49.62]
 ];
    var options = {
        legend: "none",
        colors: ['#a52714', '#097138']
    };

This chart works well, but now I need add a vertical line only in the year 2025.

How can I do it?

Thanks for your help.

Upvotes: 3

Views: 3034

Answers (1)

WhiteHat
WhiteHat

Reputation: 61285

to add a vertical line, use the annotation role after the x-axis.

change the annotation style to 'line',
you can add text or a blank string to draw the vertical line... 

const data = [
  ['Year', {role: 'annotation', type: 'string'}, 'Value'],
  ['2020', null, 48.92],
  ['2025', 'text', 49.45],
  ['2030', null, 49.24],
  ['2035', null, 50.93],
  ['2040', null, 49.62]
];
var options = {
  annotations: {
    stem: {
      color: '#097138'
    },
    style: 'line'
  },
  legend: 'none',
  colors: ['#a52714']
};

see following working snippet... 

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  const data = [
    ['Year', {role: 'annotation', type: 'string'}, 'Value'],
    ['2020', null, 48.92],
    ['2025', 'text value', 49.45],
    ['2030', null, 49.24],
    ['2035', null, 50.93],
    ['2040', null, 49.62]
  ];
  var options = {
    annotations: {
      stem: {
        color: '#097138'
      },
      style: 'line'
    },
    legend: 'none',
    colors: ['#a52714']
  };
  var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
  chart.draw(google.visualization.arrayToDataTable(data), options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 4

Related Questions