does anyone know of any drag events that can be used on a column chart created using Highcharts.js or even how to potentially mimic that event over the chart?
We have a split column chart. The smaller lower chart controls the date range on the master chart above. Currently the only way to adjust the range is to click and select segments of the smaller chart. Image below is what we have so far:
We would like to be able to make a draggable interface with handles to stretch and adjust the segment either way.
There is identical functionality in Highstock.js (screenshot below):
In highcharts you can use only master-details type of chart http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-master-detail/
But you have ability to use highstock.js and use column chart in navigator / serie. Take look at example
http://jsfiddle.net/UNBP7/
navigator:{
series:{
type:'column'
}
},
http://api.highcharts.com/highstock#navigator.series
Related
I'm creating a stacked bar graph, and I was wondering if I could modify the legend so I would be able to place an image/icon instead of the default box.
Default look:
What I want it to look like:
There is no API that would allow inserting images instead of series symbols in legend. Quickest solution that comes to mind is to create custom legend inside a chart using Renderer (API: http://api.highcharts.com/highcharts#Renderer) or outside a chart using HTML elements. Other than that is it possible to extend Highcharts (How-to: http://www.highcharts.com/docs/extending-highcharts/extending-highcharts) and enable this additional feature.
Example with custom legend outside a chart: http://jsfiddle.net/hs941kka/
I am trying to make a dynamic graph something like as below:
Y-axis gives no. of users and x axis date range(For continuous graph )
x axis gives release of an algo on that date.(For discontinued graph)
I tried combined charts of highchart this and looked in google charts library.
Is there any way by how i can either directly generate a similar chart or merge two chart types in to one? Preferably using high charts or google graphs.
I guess we can merge two highcharts in to one but I am not very sure about it, also if we can Iam not sure how to do that.
Any help is appreciated.
Thanks
I am aware that you said "Preferably using high charts or google graphs", but I want to point out that this can be done very easily in C3.js using the "types" parameter to specify the graph type for each data item.
Demo: http://c3js.org/samples/chart_combination.html
I would suggest using plot bands to indicate release dates and types. You can dynamically add them using the addPlotBand() method (see http://api.highcharts.com/highcharts#Axis.addPlotBand). They would then overlay your "run of the mill" line chart showing number of users over time.
Assuming you have data that can distinguish between the release types, you could write code that adds a plot band of the desired color at the specific points on the x-axis.
I'd suggest making the plot bands have a from and to value thin enough (say, one interval or one date's worth) so it shows up as the thin stripes in your example.
You'd need to add a manual legend to show users what those colors mean, since plot bands wouldn't automatically show up in a Highcharts legend.
I hope this helps!
I have a Highstocks chart that shows events on a timeline. These events are represented by multiple different series of data, and I want to show the line between events in different colors representing past/future (not relating to the series themselves).
Using plotOptions.series.lineWidth: 8 results in a chart looking like this, due to the colors associated with different series (some of which contain only a single point):
If I set plotOptions.series.lineWidth: 0 and specify a plotline, I can achieve the desired view:
My question:
Is it possible to:
Show a y-axis plotline in 2 different colors depending on x-axis value? or
Create 2 y-axis plotlines and only partially display each? or
Draw shaded rectangles behind the markers rather than entire bands/lines?
to create something like this (assuming today was early 2021):
Any help much appreciated.
1/2) No, plotLine can contain single color, and you cannot limit widht of it
You can use renderer to add custom lines. http://api.highcharts.com/highcharts#Renderer.path
I am using chartjs for my web application currently. I am having an issue when initializing the chart with a large amount of data. I am using a rotated bar chart, and it is removing some of my arguments fields when re sizing the chart. this results in the arguments not lining up with the correct bars. I cannot seem to find an option that allows for the height of the chart to dynamically adjust.
is there a way to achieve this so that I am able to see all of my arguments?
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