I have a grouped HighCharts bar chart that is colored by group. For example all bars in group 1 are blue, group 2 is gray, group 3 is green. Now I just need to have slight variations of color within each group. So group 1 would have a dark blue bar, regular blue bar, and a light blue bar. Then group 2 would have dark gray, regular gray, and light gray. I can't figure out how to get those color variations within each group. Thanks to anyone in advance for looking into this.
$(function () {
var pWidth = 20, // points width
pPadding = 5, // point padding
gPadding = 15, // group padding
categories = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
series = [{
name: 'Year 1800',
data: [107, 55, 635, 203, 30],
color: 'red'
}, {
name: 'Year 1900',
data: [133, 156, 550, 408, 45]
}, {
name: 'Year 2008',
data: [500, 604, 404, 632, 60]
}],
sLen = series.length,
cLen = categories.length;
var catWidth = 2 * gPadding + sLen * (pPadding + pWidth);
// 2*gPadding = left group padding + right group padding
// sLen * pPadding = distance between points
// sLen * pWidth = space taken by points itselves
// cat width = one category width/height
var height = catWidth * cLen;
var groupPadding = gPadding / catWidth;
$('#container').highcharts({
chart: {
height: height,
type: 'bar',
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0,
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: ''
},
xAxis: {
categories: categories,
title: {
text: null,
},
labels: {
enabled: false
}
},
yAxis: {
title: {
text: null,
},
labels: {
enabled: false
}
},
plotOptions: {
bar: {
pointWidth: pWidth,
groupPadding: groupPadding
},
series: {
colorByPoint: true
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: series
});
});
Here is a fiddle.
You can specify each color in the point configuration.
Instead of:
data: [107, 55, 635, 203, 30],
Use:
data: [{y: 107, color: 'someColor'}, {y: 55, color: 'someColor'}, {y: 635, color: 'someColor'}, {y: 203, color: 'someColor'}, {y: 30, color: 'someColor'}],
Here's an updated fiddle where I've done the first group with shades of blue.
Related
I have two series each with its color and I want to be able to define a different color for both series in a specific column.
How can I display the first 3 columns in grey? https://jsfiddle.net/Kagebi/omcqrzsu/
Highcharts.chart('container', {
chart: {
type: 'column',
},
plotOptions: {
column: {
grouping: false
}
},
tooltip: {
shared: true // true breaks series highliting on hover
},
xAxis: {
categories: ['24-02', '25-02', '26-02', '27-02', '28-02', '29-02', '01-03', '02-03', '03-03', '04-03', '05-03']
},
series: [
{
name: 'Expected',
data: [180, 140, 180, 140, 180, 140, 180, 140, 180, 140, 180],
color: '#b2dbff',
},
{
name: 'Current',
data: [99, 197, 165, 80, 144, 80, 144, 80, 144, 80, 144],
color: '#1d94fa'}
],
events:{
load: function() {
var point = this.series[0].points[1];
point.update({
color: 'black'
});
}
},
}
)
You can specify the color of each entry in a serie like that:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
See the documentation here : https://www.highcharts.com/docs/chart-concepts/series (point n°3).
I've updated your jsfiddle here with the first three columns in grey: https://jsfiddle.net/0mhnck5L/
I am working on a project and I would like to use bar chart(HighChart) to indicate values. I prefer to use bar chart of this kind-
bar chart image
If any one have worked on this type of bar chart or have any idea of how to implement it, please share. Thanks in advance.
Set axis min max and then create an additional series which will complete the first series data to the axis max. For the additional, dummy series set options like enableMouseTracking or showInLegend to false so it wont inteact with the user.
yAxis: {
min: 0,
max: 700
},
plotOptions: {
series: {
grouping: false,
borderWidth: 0
}
},
series: [{
enableMouseTracking: false,
linkedTo: 1,
data: [{
y: 700,
color: 'rgba(66, 134, 244, 0.5)'
}, {
y: 700,
color: 'rgba(206, 49, 28, 0.5)'
}]
}, {
dataLabels: {
enabled: true,
style: {
fontSize: '20px',
textOutline: null
}
},
data: [{
y: 107,
color: 'rgba(66, 134, 244, 1)'
}, {
y: 31,
color: 'rgba(206, 49, 28, 1)'
}]
}]
example: http://jsfiddle.net/sL5bpep3/
I have this Highcharts column chart:
http://jsfiddle.net/ltherond/bmk71a8r/
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Column chart with negative values'
},
xAxis: {
type: 'linear'
},
credits: {
enabled: false
},
plotOptions: {
column: {
borderWidth: 0,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
shadow: false
}
},
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
});
});
I want the first bar to extend horizontally from 0 to 500 on the xaxis.
In other words, I want each bar to start at the current x value and end at the next x value.
How do I do that?
The option you are looking for is connectNulls for your series attribute
From my knowledge this options is only available for Area and Line Charts and no longer available for column or bar chart
I recommend you to change your Chart Type to area chart and use connectNulls option as mentioned in Documentation here
To meet your requirement in Column chart itself you need to tune your data you fed into High chart as follows in your series code segment
series: [{
name: 'John',
data: [{
x: 0,
y: 5,
color: "#00FF00"
},{
x: 100,
y: 5,
color: "#00FF00"
},{
x: 200,
y: 5,
color: "#00FF00"
},{
x: 300,
y: 5,
color: "#00FF00"
},{
x: 400,
y: 5,
color: "#00FF00"
}, {
x: 500,
y: -3,
color: "#FF0000"
}, {
x: 600,
y: 5,
color: "#00FF00"
}]
}]
This will solve your problem. see the working fiddle http://jsfiddle.net/bmk71a8r/3/
For this approach you need to write extra codes to format your Data
Good Day
I need to start the scrollbar at the left instead of the right for my Highstock graph. Any suggestions? I've seen the setExtremes options but I'm either not using it right or it doesn't do what I need. Here is the code for the graph I have so far.
$(function() {
$('#container').highcharts({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Placed By Advisor'
},
xAxis: {
categories: ['John Jenkins', 'Steve Smith', 'Will Douglas', 'Dustin Johnson', 'Suzy Abbott', 'Wendy Jones'],
min: 2
},
yAxis: {
min: 0
},
legend: {
shadow: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0.5
}
},
series: [{
name: 'Unemployed',
data: [100, 100, 120, 55, 35, 189]},
{
name: 'Placed In Related',
data: [80, 108, 15, 74, 48, 88]},
{
name: 'Placed In Unrelated',
data: [17, 22, 187, 70, 75, 35]},
{
name: 'Except',
data: [10, 0, 19, 65, 25, 174]}],
scrollbar: {
enabled:true,
barBackgroundColor: 'lightgray',
//barBorderRadius: 7,
//barBorderWidth: 0,
//buttonBackgroundColor: 'gray',
//buttonBorderWidth: 0,
//buttonArrowColor: 'yellow',
//buttonBorderRadius: 0,
//rifleColor: 'yellow',
//trackBackgroundColor: 'red',
//trackBorderWidth: 1,
//trackBorderColor: 'silver',
//trackBorderRadius: 7
}
});
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(
);
});
});
Here is a fiddle of what I have so far.
You need to set min value as 0 and max as any (like 2).
http://jsfiddle.net/yHGS9/5/
I got a donut chart which I want to output text inside when hovering the different parts in the chart. I'm almost done, but I can't seem to get the text to center correctly.
JSFiddle: http://jsfiddle.net/K5dhu/
Code:
$(function() {
var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'DivGraphCategories',
type: 'pie',
height: 250,
width: 250,
borderRadius: 0
},
credits: {
enabled: false
},
title: false,
plotOptions: {
pie: {
borderWidth: 0,
startAngle: 90,
innerSize: '70%',
size: '100%',
shadow: false,
// {
// color: '#000000',
// offsetX: 0,
// offsetY: 2,
// opacity: 0.7,
// width: 3
// },
dataLabels: false,
stickyTracking: false,
states: {
hover: {
enabled: false
}
},
point: {
events: {
mouseOver: function(){
this.series.chart.innerText.attr({text: this.y});
},
mouseOut: function(){
this.series.chart.innerText.attr({text: "Mouseout value"});
}
}
}
}
},
series: [{
data: [
{y: 6926, name: 'hopp1'},
{y: 1370, name: 'hopp2'},
{y: 1250, name: 'hopp3'},
{y: 10000, name: 'hopp4'},
{y: 1062, name: 'hopp5'},
{y: 6376, name: 'hopp6'},
{y: 2514, name: 'hopp7'},
{y: 349, name: 'hopp8'}
]
// data: [
// ['Firefox', 44.2],
// ['IE7', 26.6],
// ['IE6', 20],
// ['Chrome', 3.1],
// ['Other', 5.4]
// ]
}]
},
function(chart) { // on complete
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the text
chart.innerText = chart.renderer.text('Start value', 112, 125).css({
width: circleradius*2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
});
As you can see, the text is aligned left and positioned at 112, 125 at start. Is there any way to set the position each time based on how long the text is? Or any property that sets this text to center, no matter whats in there.. The text is set on hover within the mouseOver function.
Well, this might not be the perfect definition of an answer to this question. But it's a way of solving the problem in another way, which gives far more customizability.
Create a div or something outside the graph area and position it with css exactly at the center of where the donut chart will appear.
Example:
<div class="graph_center">
<h5 id="GraphCenterName"></h5>
<h3 id="GraphCenterValue"></h3
</div>
Then you would just use the mouseover and mouseout events like this:
point: {
events: {
mouseOver: function(){
$('#GraphCenterName').text(this.name);
$('#GraphCenterValue').text(this.y);
},
mouseOut: function(){
$('#GraphCenterName').text('Whatever default text you want');
$('#GraphCenterValue').text('Whatever default value you want"');
}
}
}