Chartjs 2.5.0 -> Labels below the chart - javascript

I really need help because I can't find a workaround for my problem.
I just need the labels to be under the graph, like this (the default is on top):
I know there is the generateLabels() function, but with this I lost the click and hide/show function that I wanted and have with the defaults labels.
UPDATE
I find a "workaround", in version 2.5.0 , line 6713 -> change 'top' to 'bottom'. I know is not the ideal solution, but it works and is just what I need.

I find a "workaround", in version 2.5.0 , line 6713 -> change 'top' to 'bottom'. I know is not the ideal solution, but it works and is just what I need.
code printscreen

As per my thinking you can put label below your pie chart using legendTemplate
Here is fiddle : fiddle
then you can change your legend visualization as per your need.

Related

How can I modify the color of DC.js pieChart drawpaths?

I've got some pie charts with nice external labels, and drawPaths set to true, but I've been unable to get the drawPaths to actually draw. I'm curious whether there could be something lurking in css that has them set in such a way that they aren't drawing. As add'l info, I am using dc.js version: '2.0.0-beta.32'
Code for one of the charts looks like this:
zoneChart
.width(300)
.height(250)
.dimension(zoneDim)
.group(pointsByZone)
.innerRadius(20)
.externalLabels(50)
.drawPaths(true)
.externalRadiusPadding(50);
Any thoughts would be appreciated. Thanks!

How to draw edge label on Sigma.js Graph

I am creating graph using SIGMA.JS library.
Its getting drawn , but I am unable to draw edge label on the graphs.
I followed and tried to use Github library as mentioned in following thread :
show edge label in sigma.js
But As Its not much elaborate , I couldn't get through my problem.
I use following sample data in JSON.
{
"edges":
[{"source":"19",
"target":"3",
"id":"abc"}],
"nodes":[
{"label":"a1",
"x":-158,
"y":-171,
"id":"19",
"color":"rgb(49,230,186)",
"size":15},
{"label":"b1",
"x":112,
"y":-98,
"id":"3",
"color":"rgb(138,136,89)",
"size":19}]
};
How can I get this edge label using SIGMA.JS. Is it provided as default feature? If not , What steps can I take to get the same.
If needed, Suggestion on alternative JS library for Graphs is welcome.
You can use this plugin https://github.com/jacomyal/sigma.js/tree/master/plugins/sigma.renderers.edgeLabels.
There is enough info to draw label.
!important: set type as 'canvas' to renderer
Add the "label" key to each edge object.

Did Morris.js Bar Chart change the bar width?

As Title.
I want to change the width of bar chart.
Like this http://imgur.com/W4mXw8W
Change to this http://imgur.com/GuD51aS
I search the document , but I cant Find the option to change it.
Any suggestion ?
Thanks
I know this is old bu this is what helped me in the same case as above:
barSizeRatio: 1

How to make the NVD3 discreteBarChart labels on the X axis to adapt to the width or to the number of labels?

I'm currently using a the NVD3 discreteBarChart but I have a lot of data and the labels on the X axis, which are dates in my application, are encroaching upon each other like this : ). This doesn't happen with a multiBar or a linePlusBar chart, where the labels are automatically adapted :
How can I prevent the lablels on the discreteBar chart to impinge on the others?
Thanks for your answers!
Little late to answer, but to get similar results but using multi-barchart as mentioned by Lars , you can use following command to get a similar graph (i.e hide "stacked" and "grouped", as well as legend buttons).
n1$chart(showControls = FALSE, showLegend = FALSE)

dygraph vertical line

Is there a way to make a vertical line in the js graph library dygraph?
I am loading data and would like to put vertical lines like graphite does to show events
is there some special context to add vertical lines
You've probably figured this out by now, or stopped caring, but the way to do this is with a custom underlay (see http://dygraphs.com/tests/highlighted-region.html and http://dygraphs.com/tests/underlay-callback.html for examples). You provide an underlayCallback function when creating the graph, and it gets called with the canvas element, area (which helps with coordinate math), and a reference to the Dygraph object.
Here is a simple solution.
Use the crosshair demo (http://dygraphs.com/tests/crosshair.html) on the Dygraph site.
Once you disable the horizontal bar on the crosshair sample, you are getting a vertical bar.
g4.updateOptions({ pointClickCallback: function(event, p) {
var div_vertical_style="top:0px;left:"+g4.toDomCoords(p.xval,-20)[0]+"px;width:1px;height:"+g4.plotter_.area.h+";background-color:black;position:absolute;";
$("#graphdiv4").append("<div style="+div_vertical_style+"></div>")
}});
//my idea , add div .....

Categories

Resources