Highcharts fill bar background - javascript

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
}]

Related

Chart.js: Sort the stacked bars by value

I have the following stacked bar chart with the sample data. I want that per year (label) the individual stacked bars are sorted by the value. E.g. for 2019 the bar should be (form top to bottom) red (50), blue (20) and black (10).
https://jsfiddle.net/7rna08dm/2/
How can I achieve this? Is there the possibility to do this with the datasets property? Or is there any bar sorting property?
Currenctly I'm using the following data structure and didn't find a solution to achieve the expected behaviour with sorting the data:
data: {
labels: ['2017', '2018', '2019', '2020', '2021', '2022'],
datasets: [
{
label: 'Max',
data: [0, 0, 50, 10, 0, 70],
backgroundColor: 'red',
},
{
label: 'Peter',
data: [10, 0, 20, 30, 0, 0],
backgroundColor: 'blue',
},
{
label: 'Dave',
data: [0, 0, 10, 20, 0, 30],
backgroundColor: 'black',
},
],
},

How to change colour of specific xAxis label in charts js

I have been tasked to build a radar chart using charts.js. I need to change the colour of one of the labels for the xAxis to show "This is the data point we are looking at"
I have looked at the "color" option in the documentation on their website, but can't get this to work. https://www.chartjs.org/docs/latest/general/options.html?h=color
Anyone have any ideas?
Thanks in advance :-)
So you do this with "pointLabels", took a bit of finding TBH ;-).
EG:
options: {
legend: {
display: false,
},
scale: {
pointLabels: {
display: true,
fontColor: [
'rgba(95, 31, 34, 0.1)',
'rgba(95, 31, 34, 0.1)',
'rgba(95, 31, 34, 0.1)',
'rgba(241, 78, 86, 1)',
'rgba(95, 31, 34, 0.1)',
'rgba(95, 31, 34, 0.1)'
],
},
ticks: {
display: false,
},
}
}

Create combo bar chart and line chart with value "0" starting in the middle of the vertical line GOOGLE CHARTS

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.

How to limit the data points to get display in highchart

I have a requirement to limit the data points in highchart when it displayed due to space issue. Let's say if I have 100 data points in one series. I just want to display first 5 and when clicking on the expand button(I need to add a expand button in the chart) the highchart will display with all 100 points. (The expanded view will be in a modal window and the modal window will have the full hight).
I know the series are complex like, I can have multiple series in the to chart like this
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2012',
data: [1052, 954, 4250, 740, 38]
}]
and I can have complex data model like this
1.data: [1052, 954, 4250, 740, 38]
2.data: [[5, 2], [6, 3], [8, 2]]
3.
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
Note: Am not setting the series, am creating a widget in JavaScript which includes Highchart inside it. I can override the Highchart code for this.

Color of the bar behind the candlestick

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.

Categories