Repositioning (Custom) tooltips with chart.js in a Doughnut Chart - javascript

I have finally tried to rebuild my 12 month old project better.
What I Have:
A Doughnut Chart (chart.js) with an Accordion (jqueryUI) for the details.
When I click on a part of the doughnut, the Accordion on the left shows the Details (Text) for this Segment.
I would like to redesign the Tooltips as you can see in the both screenshots
where can i change the positioning of the Tooltips to be around the Chart and not on it? anyone any suggestions? all i can see in the Code is just the behavior to put the arrow above or below the tooltip...
thanks for help

Related

Using chart.js version 3, How do create Custom Labels with Links?

I'm using Charts JS and I'd like to create some custom Labels on a Stacked Bar Chart. I'm trying to recreate this following chart:
How do I create custom labels as circled in Red above? I'd like to link to other pages with these labels. Actually the bolded text would link to one page and the normal text would link to another page.
Also How would you label each bar in a way that the values drop down off the bar when there is not enough room to display it on the bar? See the "4%" or "6%" on the right side of the graph.
I also want to know how to put a margin spacing between each stacked bar. See the vertical white space between each bar on the image above.
Any help with the issues above would be greatly appreciated. Thanks.
I ended up creating my own chart using div and widths. Sometime you have more control over look and feel if you build it your self.

Javascript Error: Highchart Legend Tooltip Error on Doubling Up Charts

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/

Highcharts (column, candlestick) show mouseover tooltip anywhere on chart similar to line or area

I'm currently working on chart similar to this using highcharts
From what I have observed, column and candlestick chart will only trigger mouseover when I hover on the box itself, whereas line or area chart will have them anywhere on the chart like this
So I've tried some configurations to try make column and candlestick to behave the same way as line or area, but haven't successful yet.
Ultimately, this is the behaviour I want to achieve.
Would it be possible to change the mouseover behaviour of those charts to be the same as the line chart?
It is a bug which appeared in 5.0.8 version. You can see the closed ticket on github here which means that the fix will be included in the next release.
Until the release, you can use 5.0.7 version which works as you expect.
<script src="https://code.highcharts.com/stock/5.0.7/highstock.js"></script>
http://jsfiddle.net/q947fsa2/1/

Chart.js doughnut chart tooltip information

I'm currently working with chart.js for the first time. I encountered a problem which I'm not able to fix by myself. The tooltip is shown when I hoover the chart, but I want the tooltip to be shown always and outside of the slices. This is what I achieved at the moment:
The goal I want to achieve is to show slice information outside the doughnut chart (next to each slice). Shown in the following image:
Anybody out there who had the same problem and fixed this?
Thanks!

How to create scrollable charts in DHTMLX charts

Is there any way to create scrollable DHTMLX Chart(Bar or Line chart).
As I understood from the code, the chart is drawing in three canvases.
one for horizontal lines, one for vertical lines and another for the actual chart. So, I am not able to make the chart scrollable.
I can put the total chart into a DIV and then I can use overflow:scroll.
But with this the y-axis labels will be hidden when I scroll to right side.
Is there any way to draw scrollable charts with DHTMLX chart. scrollable means like DHTMLX Gantt.
Could you please suggest me.
Thanks in advance.
Unfortunatelly there is no such functionality in dhtmlxChart. You can only scroll the oughter container.
Dhtmlx Chart has an option to add what they call 'series' (Sample: http://dhtmlx.com/docs/products/dhtmlxChart/samples/08_dynamic/01_add.html, what you could try to do is create an event that would control the vertical/horizontal scroll to dynamically add those 'series' creating a fake scroll effect, but i think that's too much work for too little gain.

Categories