I have spent plenty of time trying to figure out how to change link's color when a user clicks on the node.I can set color when the chart is loading like this:
keys: ['from', 'to', 'linkColor'],
data: [
['1', '2', 'Red'],
But I need to change it dynamically when users click on nodes. I can catch the click and everything but just can't find a property or something to change it.
Any idea how to do that?
Thanks
Related
I am making a Line in highchart where there are between one and two objects and each object has multiple lines associated with it. My issue is I want my legend to look like this:
Where color represents the object and opacity represents the actual line on the graph. I couldn't figure out how to get the object labels "Thing one" and "Thing two" in the right place, but I hacked it together by putting the object name in the first series title and got a legend that looks like this:
This isn't the best solution, but I would be ok with it except for the fact that when the chart is resized, the line breaks in arbitrary places:
making it confusing to read. Is there a way to set the line break so that the different objects are always on different lines if the chart is resized:
Also open to suggestions on better ways to represent this legend.
I was able to achieve this by setting the legend itemWidth and width property:
legend: {
enabled: true,
itemWidth: 400,
width:400,
align: 'center'
}
I am putting together a barchart that shows 24 bars and how much production is done in each hour of the day.
Pretty simple.
I am using Highcharts.js version 4.0.1
However, I want to make this extra cool and make the current hour's bar have a different color (so you can see which bar you should look at for what hour).
So lets say:
you have 24 bars from left to right
It is 3PM in the afternoon
Therefore you want the "15th" bar in the series to be highlighted a certain color
Can anybody direct on this as I could not find this easily in the documentation.
Thank you.
You can just add a 'color' property to the series data. For example, the following has multiple points defining different colors, and a few that use the default bar color:
series: [{
data: [{y:10, color:'red'}, {y:20, color:'blue'}, {y:30, color:'#A84646'},
{y:40, color:'rgba(253, 134, 9, 0.7)'}, 50, 60]
}]
How to remove the 0 above Kosten?
I suppose I should add something to series to hide it.
My highcharts script
Any suggestions?
You will have to look into the tooltip options:
http://api.highcharts.com/highcharts#tooltip
I added the following bit of code that removed the numbers above kosten
tooltip:{
headerFormat: '',
},
It basically replaces the values from the x axis (0,1,2, etc) in the tooltip with an empty string, therefore it doesn`t appear.
Working example: http://jsfiddle.net/4pp1zhfb/5/
If I am setting the rangeSelector to All, and clicking on a series in the legend. It seems like some series data gets lost or wont be displayed.
I cant figure out the problem, am I displaying too much data? I guess there wont be a problem with the json data structure (I am using the same structur as in all the demos (on the highcharts website)) - mostly it is a 2dim/3dim array.
I will attatch some screenshots of the given problem:
seems like a general highstock problem: http://jsfiddle.net/ZqqsE/1/ just added to the given demo from the highstock demos (http://www.highcharts.com/stock/demo/compare) a legend and if you select "All" and hide one of the 3 series, the other series are truncated.
legend: {
align: "right",
layout: "vertical",
enabled: true,
verticalAlign: "middle"
},
http://jsfiddle.net/eKQcK/1/
I am pretty sorry, but i cant provide example data, because my datasets are quite big - as I said - I am using the same datastructure like the examples on highcharts.com.
[[[series1 timestamp, series1 value],[series1 timestamp, series1 value],[iteminformation]],[[series2 timestamp, series2 value],[iteminformation]],[[series3 timestamp, series3 value], [series3 timestamp, series3 value],[iteminformation]]]
as you can see in my jsfiddle code, I am using an array called informationarray, which provides information about the series as an array element.
e.g.
[seriesname, series max value, series min value]
I just added this element at the end of every series array
Simplifying my story, consider 2 series where I link their yAxes. In other words on the second yAxis there is a property linkedTo: 0
So the first yAxis is the master, hence sets extremes for both series.
However sometimes the second series has high values which are too high to be plotted in the visible area and so they get cropped.
To make matters worse, when the yAxes are linked to each other, the legend doesn't play ball: clicking on the master series name in the legend will hide both series. Clicking on the secondary series name will hide none.
Check out this JSFiddle - values on the right are cropped, legend functionality is broken.
What am I missing? How can I get both series to scale together and be all visible? How do I get the legend to work as expected? (click on series name should toggle it)
Thanks!
EDIT: As it turns out, if I remove yAxis.id (JSFiddle here) the chart and legend work as expected. However linking series to yAxis based on position in the array (I think?) instead of by some ID (string) sounds less than ideal.
Ideas?
Why you are trying assigning second series to axis which is just copy of proper one? I advice to set both series to master yAxis, and second yAxis use just as extra info on the right side of a chart.
Otherwise I don't understand the purpose of linking second axis to get THE SAME extremes as master yAxis, and then expecting to scale that yAxis according to series you have attached to that yAxis.
Something like this I think is better approach, see: http://jsfiddle.net/zYpcm/15/
series: [{
name: 'master',
data: self.masterData,
yAxis: 'master'
}, {
name: 'secondary',
data: self.secondaryData,
//yAxis: 'secondary'
}],
yAxis: [{
id: 'master'
}, {
id: 'secondary',
opposite: true,
linkedTo: 0
}]