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.
Related
Line-Breaks and Vaadin Flow Tooltips are discussed publicly, still a recommended solution is missing (e.g. https://vaadin.com/forum/thread/17952864/tooltip-with-line-break-in-vaadin; concluding in "this does not work")
The official documentation on the tooltip component does not contain any hint.
Are there any suggestions or known workarounds?
Cheers for any help on that requirement,
Daniel
I also experimented a bit with vaadin 23 on tooltips.
enter image description here
None of the promising approaches did work.
enter image description here
It's semi supported by adding the following to your styles.css and using \n as new line character.
vaadin-tooltip-overlay::part(content) {
white-space: pre;
}
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.
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
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