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%'
}
},
Related
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.
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
I have a page and there are four line charts on it. By having
exporting: {
enabled: false
}
I am able to see a Highcharts-generated export dropdown with options such as Download as PDF on each chart. These export options do not involve any access to the server. This is a pure client-side solution.
I wonder whether there is any way to use Javascript in the browser that allows me to export all charts on the page in a single PDF document?
Thanks and regards.
Well, I hate to be the one to break this to you but one clarification needs to be made, the default export options aren't really pure client-side. They leverage highcharts' own exporting server, one can override the exporting server's url using the exporting.url configuration option
url: String
The URL for the server module converting the SVG string to an image format.
By default this points to Highslide Software's free web service. Defaults to http://export.highcharts.com.
You may want to read their disclaimer & privacy statement & read more about the export module here
You can consider setting up your own exporting server, and override the export function to send SVG of all the charts on your page and do the stitching on the server side and send back the image.
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: 'Export All Charts',
onclick: function() {
var allCharts=Highcharts.charts;
var svgArray=[];
for(var i=0;i<Highcharts.charts.length;i++){
svgArray[]=Highcharts.charts[i].getSVG();
}
// ... Post svgArray to your exporting server
}
}]
}
}
}
Having said that, modern browsers do support saving content of HTML5 canvas elements, check this jsFiddle that uses canvg library to export a single chart. P.S. This isn't the default behavior of highcharts
I am using HighCharts version 3.0.2. Have set up the Highcharts server locally for exporting the charts. When download as png/jpeg/pdf is selected from the top right corner of the chart , the Highcharts demo page is displayed.
Please let me know what could be the reason for this.
Note: Have set the Phatom js path in my app.properties file of highcharts export server.
Probably you're exporting.urlends without a trailing slash. The export-server will redirect the GET (without trailing slash) to the demo/welcome page
Instead of
exporting: {
url: http://localhost/export
}
do this
exporting: {
url: http://localhost/export/
}