I have a bar chart which has dynamic columns in it.
What i want is that except the last column, all the columns should be of grey color. And the last column should be of green.
Can anyone help me out in this?
You can give color to last column in this way
series: [{
name: 'Test',
color:'grey',
data: [50, 30, 40, 70, {y: 34, color: '#66ff33'}]
}]
Fiddle link
So if the data array is dynamic then for the last value of array you have to make last element as {y: 34, color: '#66ff33'} of the array.
You could use zones.
Demo: http://jsfiddle.net/udL2ads2/6/
$(function() {
var histSuccess = [100, 99, 100, 98, 98, 99.9, 97.5, 100, 95, 90];
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with last column different color'
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
series: [{
name: 'Test',
color: 'grey',
data: histSuccess,
zoneAxis: 'x',
zones: [{
value: histSuccess.length - 1.5,
color: 'grey'
},{
color: '#66ff33'
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Related
I am trying to select specific elements in order to change the 'stroke' attribute (to change the color).
Strangely, I can select some elements by class, but the one I really need to change, does not appear to be selectable and I can't figure out why.
In the code, there are 3 selections that, currently, simply output the number of elements found and writes that number into a tag.
The 'g.highcharts-button rect' works and writes the appropriate value into the tag.
However, the class I really need to be able to select, 'highcharts-label-box', seems impossible to select.
If anyone could tell me how to select this element I then need to be able to change the 'stroke' attribute to a value of '#ff0000.
I've spent several days on this and I just cannot see how to do this, or why it won't work. Help!
jsfiddle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Total Asset Allocation</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script>
$(function() {
$('#container').highcharts({
"chart": {
renderTo: 'container',
type: 'area',
marginBottom: 150,
events: {
load: function() {
/*
THE NEXT FEW LINES OF CODE (CURRENTLY COMMENTED OUT) ARE MY ATTEMPT
TO SELECT SPECIFIC CLASSES. AT THE MOMENT, I'M ONLY TRYING TO COUNT
THE FOUND CLASSES AND OUTPUT THEM TO A <p> TAG FOR DEBUGGING.
var g = document.querySelectorAll("g.highcharts-button rect");
document.getElementById("gs").innerHTML = 'gs=' + g.length;
var w = document.querySelectorAll("path.highcharts-label-box");
document.getElementById("ws").innerHTML = 'ws=' + w.length;
var p = document.querySelectorAll('svg g path.highcharts-label-box');
document.getElementById("ps").innerHTML = 'ps=' + p.length;
*/
var locator = document.querySelector('.highcharts-exporting-group');
$(locator).append($('.highcharts-plot-lines-0').detach());
this.renderer.rect(this.plotLeft, this.plotSizeY + this.plotTop + 100, this.plotSizeX, 2)
.css({
fill: '#000',
zIndex: 4
}).add();
this.renderer.rect(this.plotSizeX / 16 * 9.5 + this.plotLeft, this.plotSizeY + this.plotTop + 100 - 5, 2, 12)
.css({
fill: '#000',
zIndex: 4
}).add();
this.renderer.text('Years to Retirement', 250, 480)
.css({
fontSize: 15
}).add();
this.renderer.text('Years Past Retirement', 550, 480)
.css({
fontSize: 15
}).add();
this.renderer.text("\u25b6", this.chartWidth - 21, 467)
.css({
fontSize: 15
}).add();
this.renderer.text('\u2B07', 650, 400)
.css({
fontSize: 10
}).add();
this.renderer.text('MM RetireSMART<br/><span style="color:transparent">...</span>"In Retirement', 615, 414)
.css({
fontSize: 10
}).add();
}
}
},
title: {
text: 'Target Asset Allocation'
},
legend: {
enabled: false
},
xAxis: {
categories: ['45+', 40, 35, 30, 25, 20, 15, 10, 5, 0, 5, 10, 15, 20, 25, '30+'],
tickColor: '#000',
tickWidth: 1,
tickmarkPlacement: 'on',
title: {
enabled: false
},
plotLines: [{
color: '#fff',
width: 5,
visible: true,
value: 9
}]
},
yAxis: {
title: {
text: 'Weighting',
style: {
color: '#000',
fontWeight: 'bold'
}
},
label: {
padding: 50
},
tickmarkPlacement: 'on',
tickInterval: 10,
tickLength: 5,
tickWidth: 1,
tickColor: '#000',
"allowDecimals": false,
gridLineWidth: 0
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#fff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#fff'
}
},
series: {
events: {
afterAnimate: function() {
var label = this.labelBySeries;
label.attr({
'text-anchor': 'middle',
}).css({
color: this.options.labelColor
})
}
},
marker: {
enabled: false
},
}
},
series: [{
useHTML: true,
name: '<span style="color: transparent;">WWWWWWW</span>Other Funds</span>',
color: '#b0b0b0',
label: {
connectorAllowed: true,
onArea: false,
style: {
color: '#fff',
fontSize: 'large'
}
},
data: [2, 3, 3, 4.5, 3, 3, 3, 2, 5, 3.5, 4, 4, 3, 3, 2, 4]
}, {
name: '<span style="color: transparent;">WWW</span>Fixed Income<br><span style="color:transparent;font-size:3px;">W</span><br/><span style="color: transparent;">WWW</span>Funds',
color: '#010101',
label: {
style: {
fontSize: 'large'
}
},
data: [5, 6, 6, 7, 9, 11, 14, 16, 16, 18, 19, 30, 35, 44, 55, 66]
}, {
name: '<span class="EquityFunds">Equity Funds</span><span style="color: transparent;">WW</span>',
color: '#303030',
label: {
style: {
fontSize: 'large'
}
},
data: [95, 99, 98, 97.5, 90, 80, 70, 60, 40, 33, 22, 20, 17, 15, 13, 11]
}],
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 510px; margin: 0 auto"></div>
<p id="gs"></p>
<p id="ws"></p>
<p id="ps"></p>
</body>
</html>
You can simply change stroke attribute in series.afterAnimate event:
label.box.attr({
stroke: 'red'
})
The only problem was to find an object (box) that contains connector attributes.
jsFiddle: https://jsfiddle.net/BlackLabel/45hfga0y/
Also, you can do it using your approach. We can get an element with selector path.highcharts-label-box and set attribute like this:
var w = document.querySelectorAll("path.highcharts-label-box");
w[0].setAttribute('stroke', 'red');
But we have to get w element after animate is finished - otherwise, if we do this in chart.load event, the w element will not exist yet.
jsFiddle: https://jsfiddle.net/BlackLabel/5q7feort/
Hope it helps!
Best regards
ps. please, as daniel_s told you before, do not duplicate your questions on a few support channels. You will get your answer anyway.
When I use the highchart labels are not coming with the ellipsis style.
For that, I need to enter more texts to achieve that by default.
For example,
for the label text "Africa hi hello how are you. I am fine. thank you. what about you? how is going? Nothing special", it shows the ellipsis as "Africa hi hello how are yo.."
But if I remove "Nothing special" and having only the following sentence, "Africa hi hello how are you. I am fine. thank you. what about you? how is going?", then labels are wrapped instead of applying ellipsis.
I have tried the formatter, but the tooltip is not coming by default.
If I use, usehtml property the design gets collapsed.
Please see the following code.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa hi hello how are you. I am fine. thank you. what about you? ho?', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
},
labels:{
formatter: function () {
return this.value;
}, style: {
color: 'black',
overflow:'none'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
},
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
stacking:'normal',
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2000',
data: [814, 841, 3714, 727, 31]
}, {
name: 'Year 2016',
data: [1216, 1001, 4436, 738, 40]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
Notice that in the demo that you provided the look of the label depends on the size of the chart. Ellipsis is applied when the width is very small. Otherwise words of the label are wrapped.
Your example as live demo: http://jsfiddle.net/BlackLabel/c7f2oadg/
Use configuration similar to the below one if you want to be sure that ellipsis will always be applied to long labels:
style: {
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
width: 100,
}
width causes here that ellipsis will be used in all labels wider than 100 px.
Live demo: http://jsfiddle.net/BlackLabel/v213vwts/
API reference: https://api.highcharts.com/highcharts/xAxis.labels.style
For my chart, I would like to position an element absolutely on the chart but under the tooltip in terms of stacking, would this be possible?
Example at: http://jsfiddle.net/0vdnrm26/1/,
The final tooltip on Asia is being overlapped by the hello world div, ideally the tooltip would be over the hello world.
It is happening like this because absolute position of the div, it is nothing to do with highcharts. Highcharts charts are svg elements and are rendered after.
You can use SVGRenderer#text to have same thing.
var chart = new Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Growth by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Billions'
},
labels: {
formatter: function() {
return this.value / 1000;
}
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
}, function(chart) { // on complete
var width = chart.chartWidth - 70;
chart.renderer.text('Hello World', width, 50)
.attr({
//stroke: 'black',
})
.add();
});
.wrapper {
position: relative;
}
/*.some-div {
position: absolute;
top: 50px;
right: 0;
background: pink;
}*/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="wrapper">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div>
<!--<div class="some-div">
hello world
</div>-->
</div>
Fiddle demo
I'd like to remove the empty space at the left of the chart.
Have found no solution so far.
OK so i want all the columns to be placed on the right side of the ticks as in the fiddle, and remove the empty space between the y axis and the first tick.
Thanks in advance
$(function() {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {},
yAxis: [{
min: 0,
}],
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: 0.25
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.3,
pointPlacement: 0.10
}]
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I am using Highcharts stacked bar chart, but not getting the lines at the end of values as it is in below image, can someone help me on this using Highcharts in built API or methods.
http://i.stack.imgur.com/y3AVm.png
create image and change the sun.png in js code.
$(function () {
$('#container').highcharts({
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
type: 'bar',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'bar',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'bar',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
data: [9, 8, 9, 19, 10],
lineWidth: 0,
enableMouseTracking: false,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>