Chart label design chart.js - javascript

I can't seem to find a way to display my chart like this with chart.js:
I want the legends to be connected to their respective sections (with a line), as shown in the picture. Any ideas?

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.

VueJs : Displaying pie chart data value of each slices

I want to display the labels and datasets of pie & doughnut charts on their sides. I searched for many options on the internet including stackoverflow, but couldn't find a relative solution for my case. Maybe I missed something.
Now I have:
I need to display the chart data on its side like this: (For my pie and doughnut charts above)
First of all, I dont see any bar chart here. Second, what library are you using for making charts? If you couldn't find proper option to display label in that library, I can recommend you to use Amcharts, its more flexible. Let me know if you get your desired results

Javascript discontinuous stacked bar graph

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

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/

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!

Categories