Expected behavior
Chart with a shadow should be visible when highchart is imported from the root of the module (import { chart, Options } from 'highcharts';)
Actual behaviour
The whole chart is not visible when highchart is imported from the root for the module import { chart, Options } from 'highcharts';
As I can see, when importing from the root, the shadow definition doesn't exist in the HTML.
Live demo with steps to reproduce
The whole chart is not visible
// With the below import the chart bars are visible
// import { chart, Options } from 'highcharts/js/highcharts';
// With the below import the chart bars are not visible
import { chart, Options } from 'highcharts';
To make the chart visible, uncomment the first highchart import and comment on the second one
Product version
Highcharts v6.2.0
Affected browser(s)
Chrome
Link to the bug report in Highcharts official repository
Please advise.
Related
Using highcharts, if you create a pie chart with styledMode: true; and you import their highcharts.css file, the hover effect on legend items causes all legend items to go opaque.
Code That Causes It
You can even see this on their demo page by selecting the Styled Mode: Pie.
And then hovering over the legends items. If you set the styledMode: false; and then remove the CSS import it goes away.
My question basically: Is this a bug? It seems like unintended behaviour.
I don't think that it is a bug - it's more like a small difference between styledMode and the regular one, which could be easily fixed by changing the opacity for it.
Demo: https://jsfiddle.net/BlackLabel/pq6omt2y/
CSS:
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover) {
opacity: 1
}
How to show tool tip only when we hover over any marker in line chart(any chart) and hide it when no data exist on graph?
For this purpose, you should adjust the hoverMode of the chart. Just the following lines to your chart configuration code:
// adjust chart interactivity
var interactivity = chart.interactivity();
// Set hover mode by X.
interactivity.hoverMode('single');
For details, check the sample in the comment below.
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
I'm trying to fill gradient color in my charts, with the sample code in the demo "http://www.highcharts.com/demo/pie-gradient". And then I found in line charts' legend, the line part of the symbol disappeared, while the markers were still visible. If I disable the markers, then there is nothing left.
Here is an example based on the code of a line chart demo: http://jsfiddle.net/TCbE3/
enter code here
I'm using Highcharts 3.0.1, with both latest FireFox and Chrome, and this problem occurs in both.
Any ideas how to fix this problem?
I'm using highcharts to build a chart and I need to use the api that it exposes to do certain things. however I would like my chart to be a master-detail type chart like the one in the highstock library but which has the handles on them.
I know i can create a master-detail in highcharts but it does not seem have the handles for dragging the selected range.
In the end I used highstock and found an example with multiple series in the 'master' chart which is called 'navigator' the highstock charts.
Example:
http://jsfiddle.net/davidoleary/NudSK/