we have been trying to implement Highcharts organization charts into our system. However, we encountered some problems while testing with our data:
• Some nodes are displayed incorrectly. The data is shown in the tooltip while hovering over the node, but the node itself is blank.
• The connecting lines between the nodes are displayed incorrectly. This seems to be a problem with highcharts.css, as removing it fixes the display issue.
Here you can find an example of our build:
Code: https://jsfiddle.net/more_paeg/0b52hajt/28/
Please let us know what we can do to resolve these issues.
regards, Bianca Medek
Referring to the comments - thank you for sharing the picture. That's how you chart looks like on my device: https://imgur.com/a/1iJwC89
I think that it might be a problem related to this bug (which has been already fixed and will be available in the npm after the next release): https://github.com/highcharts/highcharts/issues/13100
Try to use suggested workaround - Setting the series.dataLabels.allowOverlap forces labels to be displayed.
Demo: https://jsfiddle.net/BlackLabel/4dskhf6r/
plotOptions: {
series: {
dataLabels: {
allowOverlap: true
}
}
}
API: https://api.highcharts.com/highcharts/series.pie.dataLabels.allowOverlap
Related
I am currently working on a Rail application using Chartkick to produce charts and highcharts as the backend library
I have been trying to figure out a way to use the "rounded-corners" highcharts plugin (https://github.com/highcharts/rounded-corners) but did not manage to find a way to enable it.
Has anyone been able to find a way to make this work?
Try load rounded-corners.js module in that way:
import HighchartsRoundedCorners from 'highcharts/rounded-corners/master/rounded-corners'
EDIT
To adjust corners to round set following options:
plotOptions: {
series: {
borderRadiusTopLeft: '50%',
borderRadiusTopRight: '50%'
}
},
Highcharts Documentation:
https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
"For a simple drop shadow, the built-in #drop-shadow filter can be used."
But when i try to apply filter: url(#drop-shadow) in css the highcharts-graph dissappears?
Does anyone knows how i can apply a shadow to a graph in css?
.highcharts-graph {
//filter: url(#glow);
filter: url(#drop-shadow);
}
https://jsfiddle.net/Milenoi/nv0q568s/2/
This is a bug that was reported here:
https://github.com/highcharts/highcharts/issues/16147
You should wait for a response from Highcharts core developers whether it is a documentation problem or whether it will require a fix in the main Highcharts code.
I've been using highcharts 7.2.0 tilemap chart, but after updating to version 8.2.0, I'm getting an error when tileShape is set to "square"
In my https://jsfiddle.net/nqxm2yk7/1/ , tileShape is set to 'circle', but if you change it to "square", it will be crash.
Although the official documentation says, that we can use four different types of shapes
Is anyone has the same problem?
[1]: https://jsfiddle.net/nqxm2yk7/1/
If you want square tiles you will need to set the chart type to "heatmap":
chart: {
type: 'heatmap',
height: '120%'
},
and also include heatmap.js
Fiddle
I found that it is a regression and I reported it on the Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/14267. If you need a temporary workaround please ask in the comment for it - the core developers will take care of your case.
I am using HighStock in angularjs code for months now and it works properly. Now awe are migrating our app to Angular 6 everything works fine but notes/flags appearing on same date overlaps each other. In Angular we had worked around for this issue using following method.
http://jsfiddle.net/p037jdyj/
But i am not able to understand, how i can use this in Angular 6
I tries to set stackOption but it didnt worked.
plotOptions: {
series: {
lineWidth: 1
},
flags: {
stackDistance: 50
}
},
Please guide.
Check highcharts-angular documentation on how to create your own wrappers. I'm not sure if you're using highcharts-angular wrapper, but it is recommended and can be downloaded here: https://github.com/highcharts/highcharts-angular. Check angular demo with your example posted below.
Demo:
https://codesandbox.io/s/p78l1lnkmx
API reference:
https://github.com/highcharts/highcharts-angular#to-load-a-wrapper
I am trying to delete tooltips as they are not necessary for my case. I tried to delete them but they still keep appearing. Is there a problem with the cache? is there something I can try? See code below (with tooltips) but as I said deleting them doesn't work as they still show up. TIA
enter code here
https://jsfiddle.net/srduscea/1/
You can just disable tooltips with the following code,
tooltip:
{ enabled: false },
DEMO