I have succeeded to have in a sankey diagram multiple nodes that have the same origin and same destination with different colors:
(the first blue and first pink aim at the same, second and third too).
But I'd like to make those length proportional to some absolute value, which could be achieved by adding an extra space in the node representation:
Is this achievable?
I tried to add some links with same origin and destination, but it doesn't do what I need. :(
Thanks
I found a solution by adding a link with outgoing: true and color: transparent.
{
from: this.to[0].name,
weight: 1000000,
color: 'transparent',
outgoing: true,
}
Example: https://jsfiddle.net/18t92rg7/2/
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'
}
Pretty cool that one can use different dash types for the maps. However, the values for the gaps are somewhat problematic, as, in my case, they are much to wide:
The red line in the left part is the country border for Sudan/South Sudan. There should be much more dashes and gaps then the 5, on a border which is thousands of kilometres long.
Or this on for West Bank (which is not yet optimised - there is a polygon and a polyline layer, both simplified with the same value, but with different results): there is even no gap visible:
Is there anyway to change a parameter somewhere in order to produce more dashes and gaps on a given distance?
Here is a fiddle and the code
{
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['BNDL25_04_boundaries_3'], 'mapline'),
color: '#f00',
dashStyle: 'ShortDash'
},
Already I have created a normal yAxis plotline with label styles.But now I want to create a yAxis plotline with some CSS styles. Any Suggestions?
This is what i have tried so far
This is my code
var chart = $('#tv_chart_container').highcharts();
chart.yAxis[0].removePlotLine('hori_line');
data = chart.series[0].data;
var test = data.length;
var value = data[999].y;
chart.yAxis[0].addPlotLine({
value: value, // Value of where the line will appear
width: 2 ,
color: '#248EC6',
// dashStyle: 'dash',
id: 'hori_line',
label: {
text: value,
align: 'right',
style: {
color: '#FFFFFF',
fontWeight: 'bold',
}
}
});
Here is the sample.What i actually need
I worked up a proof-of-concept that gets pretty close to what you're asking. This is using all code within Highcharts, and not anything dealing with outside CSS.
Plot lines can't possess the data label formatting you're seeking, so I used a scatter plot series to serve as the line instead. Plus, this also gives you the (default) Highcharts animation when you move over a new point in your line graph.
I did a few things here:
I added the scatter plot line as a separate "dummy" series that the user won't see in the legend and won't be able to interact with.
I formatted the data label for the last (second) point of the scatter plot line to show the blue background and white numerals as in your example.
I set a marker on the last (second) point of the scatter plot line with a diamond shape. Together with the data label settings, this gives you the marker example you showed above. Now, there is a shape: 'callout' option for data labels, but the carats only point up or down for this kind of series.
I updated your mouseOver event to update the value of the scatter plot line, rather than adding and removing plot lines.
Here's the proof-of-concept fiddle: http://jsfiddle.net/brightmatrix/tzu3khp1/. You can also see a screenshot of the result below.
I hope all of this information is helpful for you. Please let me know if you have any questions; I'll be glad to update this answer to elaborate.
With Highcharts 3.0 it is possible to create charts with type 'bubble', whereas prior to 3.0 it was necessary to use a 'scatter' chart and modify marker size to make bubble charts. The nice thing about the old way is you had complete control over the visible pixel radius of each bubble--the new bubble charts automatically resize the bubbles so they are sized relative to each other. Is there any way to turn off this behavior or set bubble radius manually?
I am having a hard time seeing how a bubble chart, where the bubbles are not sized relative to each other, would be of any use.
You should be able to use the minSize and maxSize options, however, to control them the way that you need to:
bubble: {
minSize:2,
maxSize:50
}
{{edit:
I don't see them in the docs either, actually. But you can see an example here: http://jsfiddle.net/fXzke/13/ use either number as pixel value, or string with percent of chart height
}}
I found that adding an "empty" bubble to the series helps keep the size of all bubbles in the chart relative to each other:
name: '',
data: [{x:0,y:0,z:0}],
showInLegend: false,
color: 'transparent',
enableMouseTracking: false
Here's a sample on JSFiddle: http://jsfiddle.net/9bebT/2/. The legend, color, and mouse tracking variables each help keep the item in the series but otherwise invisible to the user. If you simply remove the empty bubble or set its visibility to "false," the chart doesn't register the empty bubble's z axis (diameter) as the minSize.
I have an odd request. My boss wants me to improve an existing chart with a second axis.
The blue area must define the scale of the second axis, like a percentage of completion for the reading of the green area. The 100% value must be at the maximum of the blue area. I can collect the highest value of the blue area without any trouble, but I don't know how to set the properties of the second axis according to this value. The thing is that the second axis does not have any data associated, therefore, he isn't shown...
Any idea ?
PS : I tried to be as clear as possible, but maybe that was not the case. Don't hesitate to tell me if you need more explanations.
You can use axis.linkedTo to get a second axis and data formatters to get the data formatted as percentages.
I'm not modifying the series data, only changing the text shown in the second yAxis scale, the tooltip and the data labels.
yAxis: [{
// Default options
}, {
linkedTo: 0,
opposite: true,
labels: {
formatter: function () {
return formatPercent(this.value);
}
}
}]
Example on jsFiddle: http://jsfiddle.net/uPHZx/