Custom x-axis and text with chart not displaying - image-charts

Being a 1-to-1 replacement, why does this code generate such a different bar chart? Going through the image-charts docs, this looks like it should work. I'm having problems getting the text to display next to the chart, as well as displaying the custom x-axis.
Original googleapis code
https://chart.googleapis.com/chart?cht=bhs&chs=250x70&chd=t:19&chco=39e600&chf=bg,s,f3f1e9&chxt=x,x&chm=N**%%20Low,000000,0,-1,18&chxl=1:|Low|Medium|High&chxp=0,0,25,42,100|1,13,34,71&chxs=0N**%,000000
Swapping out to image-charts
https://image-charts.com/chart?cht=bhs&chs=250x70&chd=t:19&chco=39e600&chf=bg,s,f3f1e9&chxt=x,x&chm=N**%%20Low,000000,0,-1,18&chxl=1:|Low|Medium|High&chxp=0,0,25,42,100|1,13,34,71&chxs=0N**%,000000
What's going on here? Tried breaking it down to the smallest possible pieces, but never had any success getting the x-axis or text within the chart to work.
Any ideas?

Disclaimer: I'm Image-Charts founder.
Indeed, Image-Charts currently do not support multi-axis labels but this is going to be implemented, it was requested by one of our customer.
Regarding extra labels (e.g. "19% low"), please contact our support at support[##]image-charts.com.

Related

Why are my chart.js tooltips showing up wrong?

I'm using chart.js 2.7.2, and moment.js 2.22.2 and am having a problem with tooltips.
If I'm trying to add 3 datasets to my line graph, and one happens to start later than the others, the tooltips seem to show them all starting at the same point. Then, when the yellow one runs out of data, the tooltip stops showing it.
Is this expected behaviour? I assume using "null" values for all the points where the yellow dataset has no values would fix this, but this is proving to be difficult to do with my live data on the server end.
My chart does live-updates, but I don't think that's a factor here. If this is hard to understand without the actual chart data, I can probably put it up online somewhere.

Which chart module/library should I use for Candlestick graphs in ReactJs?

I tried using apex charts, but did not find proper doc for the react-apexcharts. I also tried react-google-charts, although it works fine, but it has unwanted spaces on sides which spoils the layout. I'm not sure about which module to use. Do you have a suggestion??
The maker of ApexCharts here.
Thanks for reminding me to update the docs for the candlestick charts.
Here is the page that explains what should be the data-format.
Also, there is no major difference in options if you use react-apexcharts. The series prop should be given the required format as specified in the docs and rest will fall into places.

Show values on each column in Chart.JS

I am working with Chart.js (http://www.chartjs.org/docs) and I am dealing with some problems here.
Is it possible to show values for each data point? It seems it is lacking that functionality or am I wrong?
I am also using the stacked bar chart (with additional line chart applied on it) so I would like to show the value for each data point for these two bar data sets (excluding the Line chart)
The app is made with Ionic 2 (Angular2) and it seems, that I don't have all of the possibilites to call different helpers provided by Chart class. I see that a lot of examples include such things.
Is it safe to use this in production, regarding the support of the project?
Thank you very much in advance!

Google Charts: AnnotationChart multiple Vertical axis?

I am using the annotation chart from google here: https://developers.google.com/chart/interactive/docs/gallery/annotationchart
The reason I am using it is so the user can scroll through the data and select parts of the data.
The problem is I really need a way to have multiple vertical scales since on some of my graphs we can have up to 3 series that are very different magnitudes and it makes it hard to see the smaller series.
I've been searching and reading the docs and I can't seem to find any mention of this for the annotation chart, is this possible or have I chosen the wrong library?
Thanks.
Eventually, I found a solution here: https://github.com/google/google-visualization-issues/issues/1827
I'm still having issues with more than 2 vAxis, they start to overlap.
The last comment here fixes the overlap issues: https://groups.google.com/forum/#!topic/google-visualization-api/ncHJolrRT7o

Can highcharts export a chart AND table data?

I'm trying to figure out if highcharts can do the following:
Render a standard horizontal bar chart that contains separate table data beneath it (imagine a bar chart with an html-like table beneath it.)
The user would be able to export the entire svg using the exporting.js file that highcharts provides.
This might seem vague, I'm trying to think through this though. I'm not familiar with highcharts at all, but have looked thoroughly at the documentation. It is my understanding that something like this wouldn't be possible using highcharts, as it's text capabilities / options aren't that flexible to represent a data table.
Any possible insight would be great, thanks to everyone!
D.
If you check the HighCharts forum you can see a hack to get that.
It is not very clean but it does wonders. If your datatable if very large you may want to think about only showing portions of the data at a time (using zoom in chart).

Resources