I'm trying to design a chart that must look like very similar to this one:
chart
I could make this chart here but I'm having hard time to figure out 2 things:
How to change yAxis.lineColor and yAxis.tickColor to red on negative values.
I don't know if I can make two titles as the original chart has.
Does someone have any idea of how to achieve this design using Highcharts?
Related
I want to plot bars composed of a small but variable number of colored regions, with the same (three) colors appearing multiple times per bar. I'm aware of stacked bar charts in chart.js, but this uses the same number of colored regions (datasets) for each bar. Hacking it to plot a bunch of zero-length datasets to get the right number of colored regions in each bar feels wrong. That said, the tooltips, etc. in chart.js are nice, so if there's no more natural solution, maybe zero-length datasets are the way to go. Any thoughts?
So, instead of using chart.js, I think I'll use d3.js. Won't be hard to just plot the individual rectangles using d3.
For reference, an example that only has one bar per entry, but won't be hard to extend is the horizontal barplot shown here. (There's a simple intro to d3.js on the same site.)
Using chart.js, I have a bar chart with datapoints spread across many years:
If you look closely near the x-axis, you can see some grey bars. Here's a line chart with the same data for reference:
While using a line chart for this example could make sense, it makes the charts with less data a bit awkward:
and with bars instead of lines
Is there an option that could be used on bar charts to improve the readability when large x-axis are involved? I am representing occurrences of events over-time, another adapted kind of chart could be acceptable too.
Thanks.
I am not sure there will be an option on chart.js.
One way to deal with it is to render line charts initially and then switch the type to 'bar' when zoomed into certain date ranges.
Depending on the type of data, you could also group up the data by summing (or averaging) the data by day (or week or month). Then pass it into the chart and the time series option should be able to display the x axis dates in a more sensible manner.
Otherwise you will have to look into more power charting libraries that can handle and manipulate bigger datasets like amCharts: https://www.amcharts.com/demos/stock-chart-candlesticks/
Or look into using D3 that is highly customisable, but a bit more complex to work with.
I am trying to plot daily tasks in what i would describe as a discontinuous stacked bar graph. Another description would be a vertical gantt chart of past events.
If the description is lacking, the result i want is something like that shown in the image below (made in paint).
All task have a duration (from-to time) and can have different categories which results in different colours with belonging legends.
I have been playing around with two javascript plotting libraries; chart.js and plotly.js, and looking at others but i haven't found anything that can do what i want to achieve. Both chart.js and plotly have stacked bar graphs, but i see no way of getting spaces in between the bars and getting the legends right.
Do anyone have an idea if this is possible in any these two libraries? If not is there an alternative library where this can be done?
Regards
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!
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