I want to create organizational chart with Highchart like this https://www.highcharts.com/demo/organization-chart
How to remove Board and HR/CFO from chart?
Thank You,
Best Regards,
Eka
You need to modify data property and adapt levels and nodes to the changes.
data: [
['Shareholders', 'CEO'],
['CEO', 'CTO'],
['CEO', 'CPO'],
['CEO', 'CSO'],
['CEO', 'CMO'],
['CTO', 'Product'],
['CTO', 'Web'],
['CSO', 'Sales'],
['CMO', 'Market']
]
Live demo: https://jsfiddle.net/BlackLabel/Lou32f1d/
API Reference: https://api.highcharts.com/highcharts/series.organization.data
Related
I am new to highcharts. I have been trying to figure out how to add a marker such as an up arrow under a specific part of a line but I have not been able to find any example or document. what I found was on how to change the marker for each point of the same line. I would appreciate it greatly if someone could help me in the right direction.
Thank you.
You can use annotations.shapes, for example:
annotations: [{
shapes: [{
type: 'path',
points: [...],
markerEnd: 'arrow'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/2L4to9q8/
API Reference: https://api.highcharts.com/highstock/annotations.shapes
I don't succeed in adding a final layer to my Highmaps. I have already the ground map and some additional layers. But the lake layer does not succeed to be displayed. Why is that? It does load into QGIS correctly.
Truth is, by the way, that I haven't understood the difference between calling a GeoJSON file like this (which works for my additional layers):
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['lakes'], 'mapline'),
or like this (which works for the ground layer):
mapData: Highcharts.maps['lakes'],
data : data,
But not sure if this is relevant here. It doesn't work the one or the other way. Here is a fiddle.
Thanks for any hints.
The problem is caused by one of the geometry which has null value:
{
"type": "Feature",
"geometry": null,
"properties": {
"OBJECTID": 13,
"NAME": "Lake St. Martin",
"Shape_Leng": 1.1857234063,
"Shape_Area": 0.0450760801303
}
}
After removing the incorrect item everything works as it should. As to your second question: please also check chart.map property: https://api.highcharts.com/highmaps/chart.map and a precise description here: https://www.highcharts.com/forum/viewtopic.php?t=39602
Live demo: https://jsfiddle.net/BlackLabel/ga396zwo/
Docs: https://www.highcharts.com/docs/maps/custom-geojson-maps
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.geojson
https://api.highcharts.com/highmaps/series.mapline.mapData
https://api.highcharts.com/highmaps/series.mapline.data
I'm able to create a highcharts table of numerical data. However, I would like to create a table where it displays text 'as well as', being able to export the table as a .png, .jpg, etc
Here is my jsfiddle of the table:
`https://jsfiddle.net/eblanks/vm813fyo/36/`
You can use keys option:
plotOptions: {
series: {
keys: ['text'],
...
}
},
Live demo: https://jsfiddle.net/BlackLabel/vx67yLfw/
API Reference: https://api.highcharts.com/highcharts/series.line.keys
i need to do something, i tried everything but i cannot get what i want.
I have one chart in one container, and at some point a have to render that chart to another div, but without losing the first one, so... i need to duplicate that chart but in a new container.
Im able to get the chart that im refering to, but i need something like getting the options of this chart so i can initialize another chart, with same options but in a different container.
The chart is generated dinamically, so i do not have the options before it is rendered, so the only way i can get the option in order to replicate the chart i getting the options of an already painted chart.
Is there any way to achieve that?
Thank you.
You can use chart.userOptions property to get the options needed to create a second chart:
var chart = Highcharts.chart('container', {
series: [{
type: 'column',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
xAxis: {
max: 10
}
});
$('#duplicate').on('click', function() {
Highcharts.chart('container2', chart.userOptions);
});
Live demo: http://jsfiddle.net/BlackLabel/9q70mvky/
I have a unsort data (on x-axis) and using Highcharts to display the graph. I knew the x-axis must sort to show the tooltip as the Highcharts document wrote. But my data could not be sorted by some reasons, so could anyone meet this problem before, please give any idea/solution to show the tooltip without sort x-axis data. If I sort, my data will be wrong.
My js:
var data = [
[5.875, -20],
[8.1875, -30],
[8.875, -40],
[9.5, -50],
[10.125, -60],
[10.5, -70],
[10.875, -80],
[11.375, -90],
[11.6875, -100],
[11.875, -110],
[12.0625, -120],
[12.625, -130],
[12.4375, -140],
[12.625, -150],
[12.5, -160],
[12.4375, -170],
[12.4375, -180],
[12.375, -190],
[12.25, -200],
[12.1875, -210],
[11.9375, -220],
[11.625, -230],
[11.5, -240],
[11.125, -250],
[10.75, -260],
[10.625, -270]
];
$('#container').highcharts({
series: [{
data: data
}]
});
Or please check here http://jsfiddle.net/vuong/jedLowyv/4/
Thank you so much and have a nice day.
You have two options:
sort your data: http://jsfiddle.net/jedLowyv/5/
use scatter series with lineWidth: http://jsfiddle.net/jedLowyv/6/ (not: tooltip will show up only when hover one of markers directly)