How can I change the bar BEHIND the candlestick in Google Charts Api?
candlestick:{fallingColor:{fill:"red", strokeWidth:0.5,stroke:'black'},
risingColor:{fill:"yellowgreen",strokeWidth:0.5,stroke:'black'}}}
stroke option changes the color of the box, but not the stick behind. I get this weird color combination of black box with green or red and a blue stic.
Cannot find it in the docs
The colors parameter will modify the color of the "stick". This specifies default colors for each series in the chart.
E.g. to change the stick to red for the first series and brown for the second series:
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
var options = {
legend: 'none',
colors: ['red','brown'],
candlestick: {
fallingColor:{ fill: "orange", strokeWidth:0.5, stroke:'black'},
risingColor:{ fill: "yellowgreen", strokeWidth:0.5, stroke:'black'}
}
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Fiddle here.
This is not possible but there's a GitHub issue about it if you want to chime in.
Related
I want to change the color of the lines representing the low and high points of the candlestick. But when I try, both the falling and rising candles change to the same color. like this.
I want the falling and rising candles to have different colors. I searched the API documentation, but couldn't find an answer.
This is my hope
Here is my code
const options = {
legend: "none",
candlestick: {
fallingColor: { strokeWidth: 0, fill: "#f6465d" }, // red
risingColor: { strokeWidth: 0, fill: "#0ccb80" }, // green
},
colors: ['#0ccb80'],
};
const data = [
["Day", "", "", "", ""],
["Mon", 20, 28, 38, 45],
["Tue", 31, 38, 55, 66],
["Wed", 50, 55, 77, 80],
["Thu", 77, 77, 66, 50],
["Fri", 68, 66, 22, 15],
["Sat", 42, 54, 60, 100],
["Sun", 34, 56, 64, 80],
];
Is it possible to create a chart like the one below using google charts?
I have no idea how to go about this, so I decided to try using candlesticks chart.
with this basic starter code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(candleChart);
/*CANDEL CHART*/
function candleChart() {
var data = google.visualization.arrayToDataTable([
['Jan', 20, 28, 38, 45],
['Feb', 31, 38, 55, 66],
['Mar', 50, 55, 77, 80],
['Apr', 77, 77, 66, 50],
['May', 68, 66, 22, 15],
['jun', 68, 66, 22, 15],
['Jul', 68, 66, 22, 15],
['Aug', 68, 66, 22, 15],
['Sep', 68, 66, 22, 15],
['Oct', 68, 66, 22, 15],
['Nov', 68, 66, 22, 15],
['Dec', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
var options = {
legend:'none'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('candle_chart'));
chart.draw(data, options);
}
But this is not what I want, I don't know where to start and I couldn't find any documentation on how to make it like the chart in the image.
The vertical line needs 0 as the center like in the image with positive numbers increasing below it and positive numbers increasing above it.
The bottom blue bar would be total number of competitors that did not get accepted. The green bar being total of competitors that did get accepted.
the line will represent where the user placed in that number.
Please help I have no clue where to begin. Thank you in advance!
use a ComboChart with 3 series / y-axis columns.
for the first two series use stacked columns. the first being the negative values, the second positive.
isStacked: true,
seriesType: 'bars',
for the third, change the series type to line.
series: {
2: {
type: 'line'
}
},
data should look similar to following.
['x', 'y0', 'y1', 'y2'],
['Jan', -125, 100, -10],
['Feb', -100, 125, 5],
['Mar', -200, 415, 205],
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1', 'y2'],
['Jan', -125, 100, -10],
['Feb', -100, 125, 5],
['Mar', -200, 415, 205],
['Apr', -375, 180, -190],
['May', -180, 240, 100],
['Jun', -160, 100, -205],
['Jul', -125, 80, -12],
['Aug', -175, 110, -25],
['Sep', -100, 220, 150],
['Oct', -110, 390, 240],
['05 Nov', -10, 25, 30],
])
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#cddc39', '#616161'],
hAxis: {
title: 'FY 18'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -400, f: '400'},
{v: -200, f: '200'},
0,
200,
400
],
title: 'Amount'
},
width: '100%'
}
var chart = new google.visualization.ComboChart(document.getElementById('chart'))
chart.draw(data, options)
});
#chart {
height: 320px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
It's this:
var options = {vAxis: { ticks: [-80,-40,0,40,80] }}
Read through the documentation! Every page on the google charts site lists all the configuration options for that chart type: super useful stuff.
Working JS fiddle cribbed from a gcharts example here.
I would appreciate if someone could help me with this. It's for a job interview so quite important.
I have a JavaScript function at the top of my .aspx that draws a chart on the page (downloaded from Google Charts).
function drawChart() {
var **data** = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
...}
As you can see, the variable data here is used to create the chart.
If I have a C# DataTable object I want to pass to this function and use it instead, how do I do it?
Many thanks
Is there a way to make certain candlesticks a different color when using the Google Charts API?
For example, take a look at the following (editable) candlestick chart:
https://code.google.com/apis/ajax/playground/?type=visualization#candlestick_chart
function drawVisualization() {
// Populate the data table.
var dataTable = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);
// Draw the chart.
var chart = new google.visualization.CandlestickChart(document.getElementById('visualization'));
chart.draw(dataTable, {legend:'none', width:600, height:400});
}
Is there a way to make, say, just the 'Tue' candlestick red while keeping the rest blue/white?
It seems there is no chart option to set that.
One possibility is to build two series from your data and set different color for each series. Input data has to be changed. Tue data are moved to the second series, all other values are zero:
var data = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45, 0, 0, 0, 0],
['Tue', 0, 0, 0, 0, 31, 38, 55, 66,],
['Wed', 50, 55, 77, 80, 0, 0, 0, 0],
['Thu', 77, 77, 66, 50, 0, 0, 0, 0],
['Fri', 68, 66, 22, 15, 0, 0, 0, 0]
// Treat first row as data as well.
], true);
var options = {
legend: 'none',
bar: {
groupWidth: 100
},
series: {
0: {color: '#4682B4'},
1: {color: '#FF8C00'}
}
};
See example at jsbin. Not beautiful one because there is an offset for the second series.
The other possibility is to change SVG element property values. Each candlestick is build using something like:
<g>
<rect x="235" y="279" width="2" height="115" stroke="none" stroke-width="0" fill="#4682b4"></rect>
<rect x="213" y="312" width="47" height="44" stroke="#4682b4" stroke-width="2" fill="#4682b4"></rect>
</g>
So you have to filter out <rect> elements and change fill property for one which you want to have different color.
Update: That could be done, for example using methods querySelectorAll() and setAttribute():
var cSticks = document.querySelectorAll('rect[fill="#4682b4"]');
cSticks[2].setAttribute('fill', '#ff8c00');
cSticks[3].setAttribute('fill', '#ff8c00');
cSticks[3].setAttribute('stroke', '#ff8c00');
See updated example at jsbin with hardcoded data.
Note: fill color values are lowercase so if you search for 4682B4, nothing is found.
Hi guys I have a highcharts graph that is a stacked bar and I am trying to give my chart the effect that it is being filled, almost like a thermometer. Currently when the chart draws the red and gray bars push everything to the right. Is there a way that I can set the gray bar so that it shows right away on page load, and then the red bar fills into the gray bar? Thanks
http://jsfiddle.net/jimbob25/L974T/
series: [{
name: 'null',
data: [5, 69, 86, 75, 48],
borderRadius: 5,
color: "gray"
}, {
name: 'Values',
data: [95, 31, 14, 25, 62],
color: "red",
borderRadius: 5
}]
Update, I would like it to look like the first bar in the following link
http://jsfiddle.net/L974T/3/
You can see that the first bar is grey, i can make the rest gray and it would be fine, but the bars would not scale based off of resolution
Here is what you can do:
add one more series, with different stack (as background) - animation for that series should be disabled (duplicated of gray one)
change color for right-hand series to transparent
And here is working code: http://jsfiddle.net/L974T/4/
series: [{
name: 'null',
data: [5, 69, 86, 75, 48],
borderWidth: 0,
color: "rgba(0,0,0,0)"
}, {
name: 'null',
data: [5, 69, 86, 75, 48],
borderWidth: 0,
stack: 1,
animation: false,
color: "gray"
}, {
name: 'Values',
data: [95, 31, 14, 25, 62],
color: "red",
borderWidth: 0,
borderRadius: 5
}]