Google visualization dual Y axis chart align line with specific bar The Next CEO of Stack OverflowHiding the legend in Google ChartCan Google Charts support dual y-axis (v-axis)?Google visualization line chart missing Y axisTurning off eslint rule for a specific lineVisualization Combo Chart dual axis chartChanging axis on google visualization line chart is inconsistentGoogle Visualization - Bar Chart Backwards AxisY-Axis format on Google Charts dual Y-Axis LineAxis on Google Charts - BarChart.js - How to offset bars from ZeroLine

How dangerous is XSS

Shortening a title without changing its meaning

Traveling with my 5 year old daughter (as the father) without the mother from Germany to Mexico

Can I cast Thunderwave and be at the center of its bottom face, but not be affected by it?

Is it a bad idea to plug the other end of ESD strap to wall ground?

Planeswalker Ability and Death Timing

Find a path from s to t using as few red nodes as possible

Is this a new Fibonacci Identity?

How should I connect my cat5 cable to connectors having an orange-green line?

How does a dynamic QR code work?

Finitely generated matrix groups whose eigenvalues are all algebraic

Could a dragon use its wings to swim?

What day is it again?

Is it possible to create a QR code using text?

Simplify trigonometric expression using trigonometric identities

Does int main() need a declaration on C++?

Could you use a laser beam as a modulated carrier wave for radio signal?

Is it possible to make a 9x9 table fit within the default margins?

Small nick on power cord from an electric alarm clock, and copper wiring exposed but intact

Can you teleport closer to a creature you are Frightened of?

Strange use of "whether ... than ..." in official text

Compilation of a 2d array and a 1d array

Airship steam engine room - problems and conflict

Gauss' Posthumous Publications?



Google visualization dual Y axis chart align line with specific bar



The Next CEO of Stack OverflowHiding the legend in Google ChartCan Google Charts support dual y-axis (v-axis)?Google visualization line chart missing Y axisTurning off eslint rule for a specific lineVisualization Combo Chart dual axis chartChanging axis on google visualization line chart is inconsistentGoogle Visualization - Bar Chart Backwards AxisY-Axis format on Google Charts dual Y-Axis LineAxis on Google Charts - BarChart.js - How to offset bars from ZeroLine










1















I have attached snippet for a dual Y axis chart.



The orange dot for Ontime% Goal corresponds with the blue bar for Ontime %. Both have been assigned to targetAxisIndex: 0



Can I shift/move the dot to align above the blue bar? (see attached picture for desired position).



Thank you as always to the experts out there!



enter image description here






 google.charts.load('current', 'packages':['corechart', 'bar']);
google.charts.setOnLoadCallback(drawStuff);

function drawStuff()

var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]

]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2: targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: type: 'circle' ,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
// Adds titles to each axis.
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;


drawClassicChart();
;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>












share|improve this question






















  • Thank you again @WhiteHat. I already expected that it would likely be impossible. The tool tips in my case are required. How can I mark your reply as the answer?

    – cmill
    Mar 7 at 19:37











  • no problem, see the answer, I had tried but didn't post it due to the outcome...

    – WhiteHat
    Mar 7 at 19:46















1















I have attached snippet for a dual Y axis chart.



The orange dot for Ontime% Goal corresponds with the blue bar for Ontime %. Both have been assigned to targetAxisIndex: 0



Can I shift/move the dot to align above the blue bar? (see attached picture for desired position).



Thank you as always to the experts out there!



enter image description here






 google.charts.load('current', 'packages':['corechart', 'bar']);
google.charts.setOnLoadCallback(drawStuff);

function drawStuff()

var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]

]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2: targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: type: 'circle' ,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
// Adds titles to each axis.
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;


drawClassicChart();
;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>












share|improve this question






















  • Thank you again @WhiteHat. I already expected that it would likely be impossible. The tool tips in my case are required. How can I mark your reply as the answer?

    – cmill
    Mar 7 at 19:37











  • no problem, see the answer, I had tried but didn't post it due to the outcome...

    – WhiteHat
    Mar 7 at 19:46













1












1








1








I have attached snippet for a dual Y axis chart.



The orange dot for Ontime% Goal corresponds with the blue bar for Ontime %. Both have been assigned to targetAxisIndex: 0



Can I shift/move the dot to align above the blue bar? (see attached picture for desired position).



Thank you as always to the experts out there!



enter image description here






 google.charts.load('current', 'packages':['corechart', 'bar']);
google.charts.setOnLoadCallback(drawStuff);

function drawStuff()

var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]

]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2: targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: type: 'circle' ,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
// Adds titles to each axis.
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;


drawClassicChart();
;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>












share|improve this question














I have attached snippet for a dual Y axis chart.



The orange dot for Ontime% Goal corresponds with the blue bar for Ontime %. Both have been assigned to targetAxisIndex: 0



Can I shift/move the dot to align above the blue bar? (see attached picture for desired position).



Thank you as always to the experts out there!



enter image description here






 google.charts.load('current', 'packages':['corechart', 'bar']);
google.charts.setOnLoadCallback(drawStuff);

function drawStuff()

var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]

]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2: targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: type: 'circle' ,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
// Adds titles to each axis.
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;


drawClassicChart();
;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>








 google.charts.load('current', 'packages':['corechart', 'bar']);
google.charts.setOnLoadCallback(drawStuff);

function drawStuff()

var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]

]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2: targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: type: 'circle' ,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
// Adds titles to each axis.
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;


drawClassicChart();
;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>





 google.charts.load('current', 'packages':['corechart', 'bar']);
google.charts.setOnLoadCallback(drawStuff);

function drawStuff()

var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]

]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2: targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: type: 'circle' ,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
// Adds titles to each axis.
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;


drawClassicChart();
;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>






javascript google-visualization






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Mar 6 at 15:24









cmillcmill

1067




1067












  • Thank you again @WhiteHat. I already expected that it would likely be impossible. The tool tips in my case are required. How can I mark your reply as the answer?

    – cmill
    Mar 7 at 19:37











  • no problem, see the answer, I had tried but didn't post it due to the outcome...

    – WhiteHat
    Mar 7 at 19:46

















  • Thank you again @WhiteHat. I already expected that it would likely be impossible. The tool tips in my case are required. How can I mark your reply as the answer?

    – cmill
    Mar 7 at 19:37











  • no problem, see the answer, I had tried but didn't post it due to the outcome...

    – WhiteHat
    Mar 7 at 19:46
















Thank you again @WhiteHat. I already expected that it would likely be impossible. The tool tips in my case are required. How can I mark your reply as the answer?

– cmill
Mar 7 at 19:37





Thank you again @WhiteHat. I already expected that it would likely be impossible. The tool tips in my case are required. How can I mark your reply as the answer?

– cmill
Mar 7 at 19:37













no problem, see the answer, I had tried but didn't post it due to the outcome...

– WhiteHat
Mar 7 at 19:46





no problem, see the answer, I had tried but didn't post it due to the outcome...

– WhiteHat
Mar 7 at 19:46












1 Answer
1






active

oldest

votes


















0














nothing out of the box will allow you to adjust the position of the point.



you can move it manually, on the chart's ready event.

but the chart will move it back when the user hovers the point.



you can use a MutationObserver to move the point when the chart moves it back,

but this will just cause it to blink from one spot to the other while it is being hovered.



not much you can do, unless you disable tooltips.



see following working snippet,

hover the point to see it move...






google.charts.load('current', 
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));

);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;


drawClassicChart();
);

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





best case, you could disable the chart's tooltips,

then add your own custom tooltips,

for both the point and columns, etc...



the chart does provide mouseover and mouseout events,

not sure its worth the effort...






share|improve this answer























  • Hope this helps, you could use all custom tooltips

    – WhiteHat
    Mar 16 at 17:43











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55026570%2fgoogle-visualization-dual-y-axis-chart-align-line-with-specific-bar%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














nothing out of the box will allow you to adjust the position of the point.



you can move it manually, on the chart's ready event.

but the chart will move it back when the user hovers the point.



you can use a MutationObserver to move the point when the chart moves it back,

but this will just cause it to blink from one spot to the other while it is being hovered.



not much you can do, unless you disable tooltips.



see following working snippet,

hover the point to see it move...






google.charts.load('current', 
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));

);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;


drawClassicChart();
);

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





best case, you could disable the chart's tooltips,

then add your own custom tooltips,

for both the point and columns, etc...



the chart does provide mouseover and mouseout events,

not sure its worth the effort...






share|improve this answer























  • Hope this helps, you could use all custom tooltips

    – WhiteHat
    Mar 16 at 17:43















0














nothing out of the box will allow you to adjust the position of the point.



you can move it manually, on the chart's ready event.

but the chart will move it back when the user hovers the point.



you can use a MutationObserver to move the point when the chart moves it back,

but this will just cause it to blink from one spot to the other while it is being hovered.



not much you can do, unless you disable tooltips.



see following working snippet,

hover the point to see it move...






google.charts.load('current', 
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));

);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;


drawClassicChart();
);

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





best case, you could disable the chart's tooltips,

then add your own custom tooltips,

for both the point and columns, etc...



the chart does provide mouseover and mouseout events,

not sure its worth the effort...






share|improve this answer























  • Hope this helps, you could use all custom tooltips

    – WhiteHat
    Mar 16 at 17:43













0












0








0







nothing out of the box will allow you to adjust the position of the point.



you can move it manually, on the chart's ready event.

but the chart will move it back when the user hovers the point.



you can use a MutationObserver to move the point when the chart moves it back,

but this will just cause it to blink from one spot to the other while it is being hovered.



not much you can do, unless you disable tooltips.



see following working snippet,

hover the point to see it move...






google.charts.load('current', 
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));

);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;


drawClassicChart();
);

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





best case, you could disable the chart's tooltips,

then add your own custom tooltips,

for both the point and columns, etc...



the chart does provide mouseover and mouseout events,

not sure its worth the effort...






share|improve this answer













nothing out of the box will allow you to adjust the position of the point.



you can move it manually, on the chart's ready event.

but the chart will move it back when the user hovers the point.



you can use a MutationObserver to move the point when the chart moves it back,

but this will just cause it to blink from one spot to the other while it is being hovered.



not much you can do, unless you disable tooltips.



see following working snippet,

hover the point to see it move...






google.charts.load('current', 
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));

);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;


drawClassicChart();
);

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





best case, you could disable the chart's tooltips,

then add your own custom tooltips,

for both the point and columns, etc...



the chart does provide mouseover and mouseout events,

not sure its worth the effort...






google.charts.load('current', 
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));

);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;


drawClassicChart();
);

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





google.charts.load('current', 
packages: ['corechart']
).then(function ()
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');

var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);

var classicOptions =
width: 900,
series:
0: targetAxisIndex: 0, type: 'bars',
1: targetAxisIndex: 1, type: 'bars',
2:
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: type: 'circle',
,
,
title: 'Ontime % on the left, Count on the right',
bar:
width: "60%"
,
vAxis:
minValue: 0
,
vAxes:
0: title: 'Ontime %',
1: title: 'Count'

;

function drawClassicChart()
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function ()
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function ()
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1)
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));

);
observer.observe(chartDiv,
childList: true,
subtree: true
);
);
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;


drawClassicChart();
);

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






share|improve this answer












share|improve this answer



share|improve this answer










answered Mar 7 at 19:45









WhiteHatWhiteHat

38.5k61884




38.5k61884












  • Hope this helps, you could use all custom tooltips

    – WhiteHat
    Mar 16 at 17:43

















  • Hope this helps, you could use all custom tooltips

    – WhiteHat
    Mar 16 at 17:43
















Hope this helps, you could use all custom tooltips

– WhiteHat
Mar 16 at 17:43





Hope this helps, you could use all custom tooltips

– WhiteHat
Mar 16 at 17:43



















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55026570%2fgoogle-visualization-dual-y-axis-chart-align-line-with-specific-bar%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Save data to MySQL database using ExtJS and PHP [closed]2019 Community Moderator ElectionHow can I prevent SQL injection in PHP?Which MySQL data type to use for storing boolean valuesPHP: Delete an element from an arrayHow do I connect to a MySQL Database in Python?Should I use the datetime or timestamp data type in MySQL?How to get a list of MySQL user accountsHow Do You Parse and Process HTML/XML in PHP?Reference — What does this symbol mean in PHP?How does PHP 'foreach' actually work?Why shouldn't I use mysql_* functions in PHP?

Compiling GNU Global with universal-ctags support Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!Tags for Emacs: Relationship between etags, ebrowse, cscope, GNU Global and exuberant ctagsVim and Ctags tips and trickscscope or ctags why choose one over the other?scons and ctagsctags cannot open option file “.ctags”Adding tag scopes in universal-ctagsShould I use Universal-ctags?Universal ctags on WindowsHow do I install GNU Global with universal ctags support using Homebrew?Universal ctags with emacsHow to highlight ctags generated by Universal Ctags in Vim?

Add ONERROR event to image from jsp tldHow to add an image to a JPanel?Saving image from PHP URLHTML img scalingCheck if an image is loaded (no errors) with jQueryHow to force an <img> to take up width, even if the image is not loadedHow do I populate hidden form field with a value set in Spring ControllerStyling Raw elements Generated from JSP tagds with Jquery MobileLimit resizing of images with explicitly set width and height attributeserror TLD use in a jsp fileJsp tld files cannot be resolved