I have charts being built successfully by AmCharts. Now I would like to use CategoryAxis AutoWrap. I have added it to my AmChart call like so:
"categoryAxis": {
"gridThickness": 0,
"gridPosition": "start",
"autoWrap": true
},
...however, that doesn't seem to be enough yet, as the labels aren't wrapping. Note: the labels aren't rotated and they are horizontal.
What else do I need to do in order to get the text to wrap?
Thanks in advance to all for any info.
Per AmCharts tech support, "autoWrap" does not currently wrap text the way I need it to. (I'm not sure yet exactly what the function of "autowrap" is.)
However, you can insert line breaks into text with "\n". That was all I needed in order to resolve this.
Related
I am trying to visualize a filter in my stock chart by graying out data points which are affected by the filter. I'm using axisGuides on my valueAxis in order to achieve this. However, I also have axisGuides on my categoryAxis and unfortunately, these now disappear beneath my horizontal axisGuides.
Is there any way to change the z-index of those guides? Or does anybody have a different solution?
I have adapted an official amCharts example to show what I mean:
http://jsfiddle.net/wq97ujne/
I'm setting plotAreaFillColors": '#ababab' on my stock panel and fillColor: "#ffffff" on my valueAxisGuide.
I would like for the vertical guides to be drawn in front of and not behind the white area.
You need to set above: true for the categoryAxisGuides.
I am new user of DC.JS. I am using dc.piechart. I'm having issues change pie slice colors using a dc.pieChart.
Documentation and examples I've seen use the colors method and many combination seen from Google. I want to bind a particular color for a particular data.
which I used the code for change color but still not working mentioned bellow.
.colors(["#eeff00","#ff0022"]);
another approach-
var colorScale = d3.scale.ordinal().domain(["banana", "cherry", "blueberry"])
.range(["#eeff00", "#ff0022", "#2200ff"]);
pie.colors(function(d){ return colorScale(d.fruitType); });
Any idea about how to solve the problem?
you need to generate a ordinal scale first.
.colors(d3.scale.ordinal().range(
[ '#1f78b4', '#b2df8a', '#cab2d6'..., '#bc80bd']);
The first slice would take the first color, second the second and so on.
A gordon pointed out, there is a convenience method too:
// convenience method, the same as above
chart.ordinalColors(['#1f78b4', '#b2df8a', '#cab2d6'...]);
https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#colorscolorscale
I think what I am asking is impossible, or at least so complex/hacky it would not be worth it-but in case I am wrong...please let me know.
I have a series of 4 kendo dataviz bar charts, each representing the same set of objects, each chart graphically displaying one property of the objects. What I would like is if a marker on one chart is clicked (so that object is "selected"), to highlight this object's marker on the other 3 charts. See pic for example:
I have looked through the Kendo Dataviz website/docs, inspected the SVG markup, and looked through the object returned on the series click (in Visual Studio), but haven't found anything that could be used to accomplish this. The one thing I have come up with is redrawing all the charts with the selected item "marked" within the data array so when it is redrawn, that item can be redrawn with a different color...but I'd like to avoid redrawing all the charts each time, if possible.
Does anyone have any suggestions? I would greatly appreciate ideas, the least complex the better. Thanks so much!
The closest way I know of achieving this without a redraw would be to use the axis selection property as a selection slider with a restricted width to one column range and prevent resizing. This would simulate a selection highlight without redrawing.
You can also use plotBands property on the CategoryAxis. This is how I am doing it:
$("#chart").data("kendoChart").setOptions({ categoryAxis: { plotBands: [{ from: index, to: index + 1, color: "#ffd0c0", opacity: 0.4 }] } });
I would like to display a marker on a bullet chart even when the number is zero; however, I can't find the area in either bullet.js or bulletChart.js where I can keep it from removing the marker. This is the example that I'm implementing in my project: http://nvd3.org/examples/bullet.html
The charts work otherwise, but I just can't get that to work.
Set it to the text "0", rather than the number.
Since you're using dynamic data, you'll need to do a special case check.
In my line chart I have done this,
highlighter: {
show: true,
tooltipLocation: 'ne'
},
On chart if I have one line with three data points then the points are plotting correctly but the wrong tooltip is being getting displayed.Specifically, the tooltip is getting shuffled i.e. for one data point it is showing tool tip of other data point.
Does display of tooltip depends on, what order data is coming?
I got this!!!
Tooltip depends on the order of data points we are passing:)