Reputation: 445
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
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