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.
Related
I'm trying to show some tooltip on a particular time on the xrange Highcharts on chart render , but there is no existing feature for that, is there any possibilities to show a tooltip like below
From this example I found that annotation can be used to show some message, I tried to utilize this.
function annotateChart({
text,
value
}) {
const annons = this.annons;
const label = this.renderer.label(text, 0, 0).attr({
stroke: 'red',
'stroke-width': 2,
align: 'center',
zIndex: 99,
class: 'newText'
}).add();
annons.push({
label,
value
});
}
function redrawAnnons() {
const xAxis = this.xAxis[0];
const yAxis = this.yAxis[0];
this.annons.forEach(ann => {
ann.label.animate({
x: xAxis.toPixels(ann.value),
y: yAxis.toPixels(-2.0)
});
});
}
Highcharts.chart('container', {
chart: {
type: 'xrange',
marginTop: '55',
events: {
load: function() {
this.annons = [];
[{
text: ['min', 'time', 'data', 'bluetooth'],
value: Date.UTC(2014, 11, 2)
}, {
text: 'max',
value: Date.UTC(2014, 11, 21, 5)
}].forEach(obj => {
annotateChart.call(this, obj);
});
redrawAnnons.call(this)
},
redraw: redrawAnnons
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
minPadding: 0,
opposite: true
},
yAxis: {
title: {
text: ''
},
categories: ['Prototyping', 'Development', 'Testing'],
reversed: true,
lineColor: '#2c2d39',
lineWidth: 1
},
series: [{
name: ' ',
borderColor: 'gray',
pointWidth: 20,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 0,
partialFill: 0.25
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}, {
x: Date.UTC(2014, 11, 8),
x2: Date.UTC(2014, 11, 9),
y: 2
}, {
x: Date.UTC(2014, 11, 9),
x2: Date.UTC(2014, 11, 19),
y: 1
}, {
x: Date.UTC(2014, 11, 10),
x2: Date.UTC(2014, 11, 23),
y: 2
}],
dataLabels: {
enabled: false
}
}]
});
#container {
min-width: 300px;
max-width: 800px;
height: 190px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
I'm not sure whether this is the correct approach, if there is any other way to achieve this, also the tooltip is shown on the chart top margin
marginTop: '55'
Tooltip With more that 2 data is affecting the highchart responsiveness.
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
Is it possible to create a progress chart in Highcharts like this:
https://0.s3.envato.com/files/84221450/screenshots/weblator_responsive_charts_7_bootstrap.jpg
I believe a bar chart can be customized to create this. But is it possible to change the styling so that no axes are showing and the bar labels are positioned above the bars rather than preceding them?
Possible to recreate but it is not so dynamic( in style ). So you have to adjust css according to data series in chart.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
marginBottom: 120
},
legend: {
enabled: false
},
colors: ['#173c64'],
xAxis: {
categories: ['option 1', 'option 2', 'option 3', 'option 4 ', 'option 5 '],
labels: {
align: 'left',
x: 5,
y: -20, /* to be adjusted according to number of bars*/
style: {
fontSize: "1rem",
color: '#000'
}
},
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
plotOptions: {
bar: {
stacking: "normal",
//groupPadding: 0, //add here
//pointPadding: 0, //add here,
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
title: {
margin: 0,
useHTML: true,
text: "Test",
style: {
"color": "#333333",
"fontSize": "1.5rem",
"fontWeight": "bold"
}
},
series: [{
data: [{
y: 100,
color: '#99ddff'
}, {
y: 10,
color: '#ff8c1a'
}, {
y: 20,
color: '#ff471a'
}, {
y: 60,
color: '#c299ff'
}, {
y: 10,
color: '#99ddff'
}]
}]
})
<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 have a solid gauge that looks like this: https://jsfiddle.net/fb5Ltxbt/
These are the requirements I've achieved thus far:
Gauge range of 0 to 50
If value < 40, show in red, else in green
Display major ticks
This is what I want to add if it's possible:
Something to indicate Y-Axis stops as defined in the code
In other words, what I want is to ADD something like the "250" indicator from the following image:
It doesn't have to be an additional number, just something, anything, that marks each stop.
JSFiddle source code below:
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor: null
},
title: null,
pane: {
center: ['35%', '75%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: 'white',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
// Add something to indicate each of these stops
stops: [
[0.8, 'red'],
[1.0, 'green']
],
lineWidth: 0,
tickInterval: 10, // Keep the labels for these ticks
minorTickInterval: 2.5,
title: null,
labels: {
y: -5,
style: {
'color': 'black',
'fontWeight': 'bold'
}
}
}
};
var chart = Highcharts.chart('chartContainer', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 50,
title: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'ABC',
data: [30],
dataLabels: {
formatter: function() {
return this.point.y;
},
y: -20,
style: {
textShadow: false,
'color': 'black',
'fontSize': '2em'
},
borderWidth: 0
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 1024px; height: 768px; margin: 0;">
<div id="chartContainer"></div>
</div>
I have seen how to make specific labels outside gauge chart but it requires all normal ticks to be removed. I'd don't want them to be removed if possible but please say so if what I want is not possible too, thanks!
You can an additional yAxis to achieve additional ticks. The additional axis should be linked to the main axis. Then, it has the same scale as the main axis and you gain control over additional, independent ticks - you define specific ticks via tickPositions.
{
linkedTo: 0,
lineWidth: 0,
minorTickLength: 0,
tickPositions: [35],
tickLength: 75,
labels: {
x: 30,
y: -30,
style: {
fontSize: '25px'
}
}
}]
Live example and output
https://jsfiddle.net/ym2tvzy7/
If you want ticks with different color and styles, you can add more axes.
https://jsfiddle.net/ym2tvzy7/1/
If i understand your requirements correctly
May be this will help not exactly as your requirement anyway as an alternative
You can also try :-
plotBands: [{
from: 39.5,
to: 40.5,
color: '#55BF3B' // green
}]
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor: null
},
title: null,
pane: {
center: ['35%', '75%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: 'white',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.8, 'red'],
[1.0, 'green']
],
lineWidth: 0,
tickInterval: 10,
minorTickInterval: 2.5,
title: null,
labels: {
y: -5,
style: {
'color': 'black',
'fontWeight': 'bold'
}
}
}
};
var chart = Highcharts.chart('chartContainer', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 50,
title: null,
plotBands: [{
from: 0,
to: 40,
color: '#55BF3B' // green
}]
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'ABC',
data: [31],
dataLabels: {
formatter: function() {
return this.point.y;
},
y: -20,
style: {
textShadow: false,
'color': 'black',
'fontSize': '2em'
},
borderWidth: 0
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 1024px; height: 768px; margin: 0;">
<div id="chartContainer"></div>
</div>
I've had success with displaying box plots on Highcharts using a CSV file, but now I'm trying to display another csv file as a scatter plot on the same chart, and I don't know how.
Here's my code that works for the boxplot:
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src = "https://code.highcharts.com/highcharts-more.js"></script>
<script src = "https://code.highcharts.com/modules/exporting.js"></script>
<script src= "https://code.highcharts.com/modules/data.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
$.get('850_temp2.csv', function(csv) {
var lines = csv.split('\n');
//alert(lines[1]);
$('#container').highcharts({
chart: {
type: 'boxplot'
},
data: {
//firstRowAsNames: false,
//startRow: 2,
//endRow: 15,
csv: csv
},
title: {
text: '850mb temps'
},
xaxis: {
categories: []
},
yaxis: {
title: {
text: 'Units'
}
},
yAxis: { plotLines: [{
color: 'darkblue',
width: 2,
value: 3.5,
zIndex: 100,
label: {
text: '<b>Crater Lake</b>'
}
}, {
color: 'darkblue',
width: 2,
value: 1,
zIndex: 100,
label: {
text: '<h2><b>Lake of the Woods</b></h2>'
}
}, {
color: 'darkblue',
width: 2,
value: 0,
zIndex: 100,
label: {
text: '<h2><b>Siskiyou Summit</b></h2>'
}
}, {
color: 'darkblue',
width: 2,
value: -3,
zIndex: 100,
label: {
text: '<h2><b>Sexton Pass</b></h2>'
}
}, {
color: 'darkblue',
width: 2,
value: -5,
zIndex: 100,
label: {
text: '<h2><b>Medford</b></h2>'
}
}]
}
});
});
});
//$('#container').highcharts(Highcharts.merge(options));
//options.data.switchRowsAndColumns = !options.data.switchRowsAndColumns;
</script>
</head>
<body>
<div id = "container" style="width:1100px; height: 700px; margin: 0 auto">
</div>
</body>
</html>
And here's my code I'm trying to use to display the 2nd CSV file. I've looked all over, and I can't find something that addresses this. Here are the csv files.
850_temp2.csv
hour,one,two,three,four,five
0,3.0, 4.0, 5.0, 2.0, 5.0
6,2, -1.0, 0.0, -3.0, 2.0
12,4.0, 4.0, 5.0, 6.0, 7.0
18,13.0, 12.0, 11.0, 10.0, 10.0
24,13.0, 13.0, 12.0, 11.0, 6.0
30,8.0, 8.0, 8.0, 9.0, 11.0
and
precp.csv
hour,one,two,three,four,five
0,0.0, 0.4, 0.3, 0.6, 0.4
6,0.6, 0.4, 0.5, 0.6, 0.7
12,0.1, 0.1, 0.05, 0.04, 0.03
18,0.0, 0.0, 0.0, 0.03, 0.02
24,0.0, 0.0, 0.0, 0.0, 0.0
30,0.0, 0.0, 0.0, 0.0, 0.0
Thanks for any help.
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src = "https://code.highcharts.com/highcharts-more.js"></script>
<script src = "https://code.highcharts.com/modules/exporting.js"></script>
<script src= "https://code.highcharts.com/modules/data.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
$.get('850_temp2.csv', function(csv) {
$.get('precp.csv', function(csv2) {
var lines = csv2.split('\n');
alert(lines[1]);
$('#container').highcharts({
yAxis: { plotLines: [{
color: 'darkblue',
width: 2,
value: 3.5,
zIndex: 100,
label: {
text: '<b>Crater Lake</b>'
}
}, {
color: 'darkblue',
width: 2,
value: 1,
zIndex: 100,
label: {
text: '<h2><b>Lake of the Woods</b></h2>'
}
}, {
color: 'darkblue',
width: 2,
value: 0,
zIndex: 100,
label: {
text: '<h2><b>Siskiyou Summit</b></h2>'
}
}, {
color: 'darkblue',
width: 2,
value: -3,
zIndex: 100,
label: {
text: '<h2><b>Sexton Pass</b></h2>'
}
}, {
color: 'darkblue',
width: 2,
value: -5,
zIndex: 100,
label: {
text: '<h2><b>Medford</b></h2>'
}
}]
}, //y axis close
series: [{
type: 'line',
name: 'pcpn',
data: csv2
},{
type: 'boxplot',
name: '850mbT',
data: csv
}]
}); //highcharts container close
}); //precip csv close
}); //850temp csv close
}); //document ready close
//$('#container').highcharts(Highcharts.merge(options));
//options.data.switchRowsAndColumns = !options.data.switchRowsAndColumns;
</script>
</head>
<body>
<div id = "container" style="width:1100px; height: 700px; margin: 0 auto">
</div>
</body>
</html>
Essentially, I want to plot these two chart types, but on the same chart. I'll of course need to add a second y axis that applies to the scatter plot values.