I have one JSfiddle https://jsfiddle.net/xdkhs18p/
Dummy code section to post question.
when I increase the width of frame where chart is drawn to around 1100px and then run the fiddle I can see some of the initial x-axis labels are missing.
JSFIddle with 7.2.1 highchart https://jsfiddle.net/kamaldeka/zntm7epg/6/
This fiddle show the x-axis label correctly.
one can see the difference in the x-axis labels in both the fiddles
This is a bug in Highcharts 8.0.4
https://github.com/highcharts/highcharts/issues/13430
Related
In Highcharts library we are using bar chart and sometimes value bars are getting displayed below the x-axis label and over the legends.
This issue does not continue generating.
Jsfiddle demo : https://jsfiddle.net/4r21uwzL/
Please have a look below image of the issue.
I am facing an Issue by enabling the tool tip of the Zoomable line graph with Scatter plot(added by me) in the line graph.
The tool-tip doesn't works in the graph,When i hover on the circle and it works when i remove the .rect part of the code. My Sample line graph code which i had taken is this Sample Line Graph Atleast 80% of the code matches with this sample code.
I have found this thread but there are no accurate answers on this,so placing a question.
D3: How to handle zooming and tooltips in a single chart?
Thanks in advance.
I have a single chart webpage showing Highchart line:bar graph: http://www.jcsweb.biz/mef/AnimGIF/legend_csv_03h_1Cht_01d.htm
with external chart data:
http://www.jcsweb.biz/mef/csv_dump/HC_TEST_DATA1.CSV
and Chart Legend Tooltip (long string) from an external file: http://www.jcsweb.biz/mef/csv_dump/HC_TEST_LEGEND1.CSV
So on mouseover of chart series legend, a much longer Legend tooltip is displayed (ie as held in HC_TEST_LEGEND?.CSV).
It all works fine, but hits problems with the longer Legend tooltip when I try and "double up" to display 2 (or more) such charts on a single webpage. http://www.jcsweb.biz/mef/AnimGIF/legend_csv_03h_2Cht_01d.htm
The Upper chart long Legend tooltip displays fine (as above) but the Bottom chart doesnt display ANY longer Legend description from HC_TEST_LEGEND2.CSV.
In moving to 2 charts, I have tried to make the JavaScript code/variables names distinctive to each chart eg "legendData1" vs "legendData2" but I have run out of browser debug pointers to find the js coding legend tooltip error !
Any help/pointers on finding the offending code in Chart 2 much appreciated
The source of your problem is probably the value of e2.clientY. I debugged your code and it has the value higher than the chart's height. It seems that this value is relative to the whole document. When you assign attributes to your legend tooltip object then (.attr()) all the values are relative to the chart container. So in this case your tooltip is created outside of the chart and is not visible.
Here's live working demo of legend tooltip that uses properties of SVGElements instead of mouse event: http://jsfiddle.net/kkulig/mujn4eja/
Here is plunker - http://plnkr.co/edit/VYH5QbO99ZbMkvc2D4Fe?p=preview
As I add more and more categories, these labels overlap and I can't see anything
Is there a better way to align labels?
Thanks
I rather moved to using NVD3 and created pie charts
The demo and code is availale http://plnkr.co/edit/qJnZzBS4ZOUtD2q9FV11?p=preview
Looking through the documentation for Highstocks, I found this example:
Shown here is two series on the same chart, therefore with a linked range selector - this is really really useful, but I wish to display something different which is proving to be very difficult.
What I'm looking for is a normal line graph on the top series, representing data plotted onto time (almost like in this example), but a bar chart or horizontal candle chart in the lower graph, representing one or more timelines.
I've drawn an image of what I'm looking for:
I apologise for the crude drawing, but hopefully it shows what I am aiming to achieve: standard graph on top, bar/candle on bottom.
I have attempted various techniques to render this, but I can't find a way to have both series drawn on the same timescale, linked with the same range selector.
In case it helps, here's a starting point on JSFiddle, with all the unnecessary code removed: http://jsfiddle.net/g105b/8JhXv/
and a link to the original demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
Answer taken from official Highcharts forum
it is possible, but with some limitations. In the fact you want to show gantt chart. Bar charts aren't possible in your case - bar chart = inverted whole chart (yAxis becames xAxis, etc). Instead take a look at example for gantt chart: http://jsfiddle.net/highcharts/r6emu/
You can combine them into one, ane effect: http://jsfiddle.net/8JhXv/1/
About limits:
tooltip fo bottom chart is availabe only when you mouseover start and end date
bars are on lines, not between them