Highcharts Area Chart - Specifying Area Color - javascript

I'm new to coding, and I feel like this answer shouldn't be very difficult; yet, I've struggled with it for about two days now and so I'm looking for help.
I'm trying to specify the colors of areas in Highcharts' "Area Chart with Negative Values". I'm using Highcharts' basic template, but can't figure out how to change the colors of the respective areas.
Here's the JSfiddle that includes me trying to specify the color; when I do so, the chart fails to run. (Notice I've tried to change the color of the "john" series).
http://jsfiddle.net/aoouym2o/
I followed the instructions given in HighCharts' API, but I can't make it work. Here's the API section: http://api.highcharts.com/highcharts#plotOptions.area.color
Again, here's the original code without me trying to change any color:
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Area chart with negative values'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5]
}]
});
});
What am I missing?

You did it exactly right, you were just missing a comma before your added color setting ;)
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color: '#FF0000'
},
Here is a link to a modified fiddle. (updated link to the working version)

You can set color for the chart by specifying it in each series object:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color: '#0000FF'
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
color: '#FF0000'
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
color: '#00FF00'
}]

Just change color setting :P
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color : '#f7a35c'
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
color: '#7cb5ec'
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
color: '#90ed7d'
}]
and if you want to change the color of the number > 0 watch
http://www.highcharts.com/docs/chart-concepts/series

Add option:
plotOptions: {
series: {
lineColor: '#303030'
}
},

Related

How I can Add Start and end point in stacked bar chart in chart js?

I need to add starting and ending points on stacked charts , is there any way we can add it.
In The Given picture I need to start SaaS Quick Ratio from the 4 rather than 0 .
Setting to series.threshold give you possibility to serve base to the column, in your case you can start column from 4 at yaxis.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
series: [{
name: 'John',
threshold: 4,
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
Demo: https://jsfiddle.net/BlackLabel/f73zcu4t/

Highcharts, How to remove gaps on x coordinates

For a Highcharts spline type chart, I want to completely remove the left and right spaces.
I tried to change some options but there is no success.
Spacing and margin keys did not make any appearance changes.
Does anyone have any info on how to remove the spaces, all help is welcome.
Example chart
Highcharts.chart('container', {
title: {
text: ''
},
chart: {
type: 'spline',
},
legend: {
display: false
},
xAxis: {
categories: [7, 13, 16, 18, 19, 20, 29, 22, 25, 38, 23, 26, 28, 29, 33],
},
yAxis: {
tickPosition: 'inside',
min: 0,
title: {
text: null
},
floor: 0,
tickWidth: 1
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
These gaps are added when using the xAxis.categories option. If you remove these options then it works the way you want. For tick positioning in this case it is better to set other available API options. Find out more about it here: https://api.highcharts.com/highcharts/xAxis.tickPositions

Highcharts stacked column with another column overlapping

I am trying to get highcharts to show a stacked column with another separate (slightly opaque) column overlayed on top of it.
The jsfiddle I am working with can be seen below, basically I want the 'female' stack to overlap/overlay the male stack instead of being adjacent to it. Any help would be appreciated.
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 2],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'male'
}, {
name: 'Janet',
data: [3, 1, 4, 4, 3],
stack: 'female',
stacking:null ,
color: 'rgba(211, 211, 221, 0.70)' ,
pointWidth: 50
}]
https://jsfiddle.net/adwt7br0/1/

How to add markers to a grouped bar plot in Highcharts?

I'm using Highcharts to create a grouped bar chart and looking to add markers for each bar.
I've created a multi-series (bar + scatter) plot that is similar to what I want, but since there is no "grouped scatter" plot, the circle marks are centered (Screenshot attached below).
Is there a way to change it so the marks appear on the same row as the bar?
JSFiddle
Highcharts Config
{
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: ['One', 'Two', 'Three']
},
tooltip: {
enabled: true
},
series: [
{
name: '2015',
data: [7, 8, 9]
},
{
name: '2015 Goal',
marker: {
symbol: 'circle'
},
data: [5, 6, 6],
type:'scatter'
},
{
name: '2016',
data: [9, 9, 10]
},
{
name: '2016 Goal',
marker: {
symbol: 'circle'
},
data: [10,12,13],
type:'scatter'
}
]
}
Set x value for the point. By default x values for the scatter are integers - 0, 1, 2 so they are centered according to the category. You can move them a little by 0.15 and then in the pointFormatter round those values.
series: [{
name: '2015',
data: [7, 8, 9]
}, {
name: '2015 Goal',
marker: {
symbol: 'circle'
},
data: [
[-0.15, 5],
[1 - 0.15, 6],
[2 - 0.15, 6]
],
type: 'scatter'
}, {
name: '2016',
data: [9, 9, 10]
}, {
name: '2016 Goal',
marker: {
symbol: 'circle'
},
data: [
[0.15, 10],
[1 + 0.15, 12],
[2 + 0.15, 13]
],
type: 'scatter'
}]
In pointFormatter:
plotOptions: {
scatter: {
tooltip: {
pointFormatter: function() {
return `x: <b>${Math.round(this.x)}</b><br/>y: <b>${this.y}</b><br/>`
}
}
}
},
example: http://jsfiddle.net/kh8b4jy3/

Grouping Legends in Highcharts

I have two stacked bar charts, but all the legends (of both bars) are displayed together. I want to group the legends based on the items stacked in the bar.
can some one help me?
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});
I have similar type of bar. and i want to group janet and jane together as a group and joe and john as another group.
Based on the reference example you linked to, you can do this with the new series 'linkedTo' property in version 3.
http://api.highcharts.com/highcharts#plotOptions.series.linkedTo
updated example:
http://jsfiddle.net/jlbriggs/6gw5P/2/
linkedTo:':previous'
I know this is an old issue, but setting showInLegend on your series, will work, and seems the easiest way.
showInLegend: false
Eg:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male',
showInLegend: false
}
You can't group the legends by stack, because then you'll lose the ability to identify the different components (IE either the individual series won't have a distinct color or the legend color won't match them). The legends map to the people because those are all distinct data sources and since you add them that way it displays them like that.
If you don't care about the different components having a distinct color, then you don't want a stacked bar chart at all. You can just have a normal bar chart with 2 series, male and female.
series: [{
name: 'Male',
data: [10, 7, 8, 9, 7]
},
name: 'Female',
data: [5, 5, 10, 6, 4]
}
}
You can link series using ids and linkedTo. In the example below, the first serie is linked to the second:
series: [
{
type: 'column',
name: '',
data: [],
linkedTo: 'second_serie_id', // <--- this
color: '#DE3733',
pointWidth: 1,
showInLegend: false,
},
{
id: "second_serie_id", // <--- this
type: 'scatter',
name: 'FFT 1',
data: [],
color: '#DE3733',
lineWidth: 0,
showInLegend: true,
states: { hover: { enabled: false } }
}
]

Categories