Is there a way to change the width/thickness of the vaxis baseline in google charts?
3
I want to make the vaxis baseline in my combo chart to be thicker/bolder.
I'm able to change the color with the code below
vAxis: {
baselineColor: '#FFA500',
},
Is there a way to change the width?
javascript charts google-visualization
edited Jan 6 at 16:42
WhiteHat
37.5k61679
asked Jan 1 at 21:17
Taahira CarterTaahira Carter
13310
add a comment |
3
I want to make the vaxis baseline in my combo chart to be thicker/bolder.
I'm able to change the color with the code below
vAxis: {
baselineColor: '#FFA500',
},
Is there a way to change the width?
javascript charts google-visualization
edited Jan 6 at 16:42
WhiteHat
37.5k61679
asked Jan 1 at 21:17
Taahira CarterTaahira Carter
13310
add a comment |
3
3
3
I want to make the vaxis baseline in my combo chart to be thicker/bolder.
I'm able to change the color with the code below
vAxis: {
baselineColor: '#FFA500',
},
Is there a way to change the width?
javascript charts google-visualization
edited Jan 6 at 16:42
WhiteHat
37.5k61679
asked Jan 1 at 21:17
Taahira CarterTaahira Carter
13310
I want to make the vaxis baseline in my combo chart to be thicker/bolder.
I'm able to change the color with the code below
vAxis: {
baselineColor: '#FFA500',
},
Is there a way to change the width?
javascript charts google-visualization
javascript charts google-visualization
edited Jan 6 at 16:42
WhiteHat
37.5k61679
asked Jan 1 at 21:17
Taahira CarterTaahira Carter
13310
edited Jan 6 at 16:42
WhiteHat
37.5k61679
asked Jan 1 at 21:17
Taahira CarterTaahira Carter
13310
edited Jan 6 at 16:42
WhiteHat
37.5k61679
edited Jan 6 at 16:42
WhiteHat
37.5k61679
edited Jan 6 at 16:42
WhiteHat
37.5k61679
37.5k61679
asked Jan 1 at 21:17
Taahira CarterTaahira Carter
13310
asked Jan 1 at 21:17
Taahira CarterTaahira Carter
13310
asked Jan 1 at 21:17
Taahira CarterTaahira Carter
13310
13310
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
no standard options for changing the thickness of the baseline,
but it can be changed on the chart's 'ready' event.
since you're changing the color,
the color can be used to find the baseline <rect> element.
but need to make sure the color you're looking for is all lowercase.
(the chart changes any color options to lowercase)
to change the thickness, add attributes for 'stroke' and 'stroke-width'
baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.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 = {
vAxis: {
baselineColor: '#ffa500',
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(baseline) {
if (baseline.getAttribute('fill') === options.vAxis.baselineColor) {
baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')
}
});
});
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>answered Jan 6 at 16:41
WhiteHatWhiteHat
37.5k61679
hope this helps...
– WhiteHat
Jan 6 at 16:41
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999008%2fis-there-a-way-to-change-the-width-thickness-of-the-vaxis-baseline-in-google-cha%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
no standard options for changing the thickness of the baseline,
but it can be changed on the chart's 'ready' event.
since you're changing the color,
the color can be used to find the baseline <rect> element.
but need to make sure the color you're looking for is all lowercase.
(the chart changes any color options to lowercase)
to change the thickness, add attributes for 'stroke' and 'stroke-width'
baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.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 = {
vAxis: {
baselineColor: '#ffa500',
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(baseline) {
if (baseline.getAttribute('fill') === options.vAxis.baselineColor) {
baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')
}
});
});
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>answered Jan 6 at 16:41
WhiteHatWhiteHat
37.5k61679
hope this helps...
– WhiteHat
Jan 6 at 16:41
add a comment |
0
no standard options for changing the thickness of the baseline,
but it can be changed on the chart's 'ready' event.
since you're changing the color,
the color can be used to find the baseline <rect> element.
but need to make sure the color you're looking for is all lowercase.
(the chart changes any color options to lowercase)
to change the thickness, add attributes for 'stroke' and 'stroke-width'
baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.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 = {
vAxis: {
baselineColor: '#ffa500',
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(baseline) {
if (baseline.getAttribute('fill') === options.vAxis.baselineColor) {
baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')
}
});
});
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>answered Jan 6 at 16:41
WhiteHatWhiteHat
37.5k61679
hope this helps...
– WhiteHat
Jan 6 at 16:41
add a comment |
0
0
0
no standard options for changing the thickness of the baseline,
but it can be changed on the chart's 'ready' event.
since you're changing the color,
the color can be used to find the baseline <rect> element.
but need to make sure the color you're looking for is all lowercase.
(the chart changes any color options to lowercase)
to change the thickness, add attributes for 'stroke' and 'stroke-width'
baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.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 = {
vAxis: {
baselineColor: '#ffa500',
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(baseline) {
if (baseline.getAttribute('fill') === options.vAxis.baselineColor) {
baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')
}
});
});
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>answered Jan 6 at 16:41
WhiteHatWhiteHat
37.5k61679
no standard options for changing the thickness of the baseline,
but it can be changed on the chart's 'ready' event.
since you're changing the color,
the color can be used to find the baseline <rect> element.
but need to make sure the color you're looking for is all lowercase.
(the chart changes any color options to lowercase)
to change the thickness, add attributes for 'stroke' and 'stroke-width'
baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.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 = {
vAxis: {
baselineColor: '#ffa500',
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(baseline) {
if (baseline.getAttribute('fill') === options.vAxis.baselineColor) {
baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')
}
});
});
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.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 = {
vAxis: {
baselineColor: '#ffa500',
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(baseline) {
if (baseline.getAttribute('fill') === options.vAxis.baselineColor) {
baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')
}
});
});
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.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 = {
vAxis: {
baselineColor: '#ffa500',
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(baseline) {
if (baseline.getAttribute('fill') === options.vAxis.baselineColor) {
baseline.setAttribute('stroke', options.vAxis.baselineColor)
baseline.setAttribute('stroke-width', '10')
}
});
});
chart.draw(data, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>answered Jan 6 at 16:41
WhiteHatWhiteHat
37.5k61679
answered Jan 6 at 16:41
WhiteHatWhiteHat
37.5k61679
answered Jan 6 at 16:41
WhiteHatWhiteHat
37.5k61679
answered Jan 6 at 16:41
WhiteHatWhiteHat
37.5k61679
37.5k61679
hope this helps...
– WhiteHat
Jan 6 at 16:41
add a comment |
hope this helps...
– WhiteHat
Jan 6 at 16:41
hope this helps...
– WhiteHat
Jan 6 at 16:41
hope this helps...
– WhiteHat
Jan 6 at 16:41
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53999008%2fis-there-a-way-to-change-the-width-thickness-of-the-vaxis-baseline-in-google-cha%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
