i am using highcharts and having an issue while download. Initially after the chart is displayed we are modifying it in the load function of events object. Now when i export the chart it is taking the default parameters of the chart( i.e height and width) and not the updated ones. how to resolve this ?
Related
I am following the code example of this jsFiddle in order to draw an additional table into the Highcharts SVG, so that it can be exported into an image when the chart is exported.
I am able to draw the table I want, but when I export, my extra table is not part of the image, it just shows the chart as if I had not done any of the extra drawing.
This is important to note, I think, because as in the example jsFiddle, I leave the legend in its default state (horizontal, centered), with a negative y value in order to trick Highcharts into extending the SVG area below the chart to leave room for the table. But then, as part of the process where I draw my table, I move the individual legend elements by changing their tranform: translate() values.
However, when I try to export the chart to an image, in the image the legend is back to being horizontal and centered below the chart, which indicates to me that Highcharts in not actually reading the "live" SVG information, but instead rendering some sort of cached version, or something?
I am using offline exporting, is this behavior a result of that?
I am also using highcharts-react-official, and I have my imports and setup like this:
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import Exporting from 'highcharts/modules/exporting';
import OfflineExporting from 'highcharts/modules/offline-exporting';
Exporting(Highcharts);
OfflineExporting(Highcharts);
export default class MyChart extends Component {
// etc
}
Is this behavior something to do with using highcharts-react-official?
As suggested in the comments, I tried using marginBottom instead of a negative Y value for the legend in order to make space for the table at the bottom of the SVG, but that did not change anything, the table was still not exported.
Here's how my component is set up. I tried to include all the different stages it goes through as it receives and processes the data before actually putting it into the chart:
https://codesandbox.io/s/w7m53k6p37
We are using Highstock to display our data.
The project has pre-existing code that uses CSS transform to make the chart larger or smaller e.g. transform: scale(0.7)
The problem is, this CSS transform causes the cursor to be offset when using the navigator bar and hovering over data points.
The requirements at the minute mean I cannot take out the transform to use the inbuilt Chart.setSize() function.
Here is the attempt so far: http://jsfiddle.net/c8bfwhg0/30/
NOTE: I tried getting the post-transform height and width and applying Chart.setSize() with those values, but the problem persists.
I am using highchart's pie chart to display my data. But i am having some problem on setting the height of the sub-title. I am displaying my chart in a div named container(<div id="container></div>). However, the height i have to set is inside that div which is set by highchart itself. My subtitle is quite long and is not fully displayed in the chart.
I have made the js fiddle of my issue below:
http://jsfiddle.net/Simron_Thapa/eezpjaav/
You can explicitly bump up the height of the created highcharts-container:
var elem = $('.highcharts-container');
elem.css('height',elem.height() + 200); // increasing it by 200px
Updated fiddle.
I am using highcharts library to draw chart and I need to display Weekdays as labels on x-axis and also to auto reset it like from Monday to M if all weekdays can't fit on screen.
It should be dynamic, which means no flickering should appear when changing label text on x-axis.
Any suggestions?
Thanks in advance.
There is no straight option for that, rather simple workaround:
Disable reflow from Highcharts, use window.resize browser event
In that event add condition to decide showing full name of just shortened, and set this for chart - chart.xAxis[0].dateTimeLabelFormats should be fine
After setting new format, apply new chart dimensions using chart.setSize(w, h)
I am using Highstock 1.2.5.
These are the options I have with my chart.
I am adding colors to yAxis using axis.addPlotBand based on certain conditions.
Also, I am using axis.addPlotLine to draw line some plot values.
Both, these options are set after chart is drawn. As, I have dynamic values.
This works fine no problem. Lately, I have enabled Export options.
Now, The exported pdf is not showing above mentioned changes. How do I do that ?
Second, I have enabled Legend. Is it possible to not to include Legend while exporting chart.