I am using AmCharts v3 to add charts to my PHP page. The category axis labels in my charts are legible when the charts don't have a lot of data, but the labels overlap when there is a large amount of data. Is there a way to rotate the labels so that they don't overlap?
You can set the labelRotation in your categoryAxis to rotate the labels. To rotate them vertically:
AmCharts.makeChart("...", {
// ...
categoryAxis: {
labelRotation: 90,
// ...
}
});
There's also autoRotateCount and autoRotateAngle, which can be used to automatically rotate the labels if there's more than a specified number of axis labels instead of always rotating them using labelRotation.
Related
I have created a subplot with plotly.JS , x axis is shared for each graph as given in the below picture.
I want to show the x axis values for all graphs in the subplot instead for showing it only for graph at bottom. I achieved this using anchor attribute, but the graphs are not aligned well. Look at the below picture, here 600 of graph2 is not positioned exactly to the other two graphs.
I want all the graph to share x axis as well as show the x axis values on each graph.
Whenever I use the zoom in function on my c3js charts, only the x-axis and its values are zoomed in, while the y-values and axis stay constant. Is there a way to enable for the y-axis to also be zoomed into?
You can reset the values of the Y-axis.
Usage:
zoom: {
rescale: true
}
Refer
http://c3js.org/reference.html#zoom-rescale
I have chart with 3 y-axis and one x-axis. I must zoom all 3 axis. But D3.zoom() work only with one y-axis.
1) Is it possible to add another 2 axis?
2) Is it possible to set all 3 y-axis with center on 0? And if I zoom chart ticks must stay on same place?
For each y-axis I create another zoom object
var zoom2 = d3.behavior.zoom()
.y(yAxis2);
and then I update it in zoom callback
zoom.on('zoom', function(){
zoom2.scale(zoom.scale());
zoom2.translate(zoom.translate());
// update stuff
});
I have multiple charts on a page which are supposed to have uniform height & y-axis baseline, so that the user could compare each chart apple-2-apple.
I rotate the x-axis label to 90 degrees so that it would look nicer and won't overlap with each other, but the problem is, label's length is different from chart to chart, this makes highcharts automatically adjust the height and y-axis baseline of the charts.
How can I make the chart's height and y-axis baseline to be fixed for all the charts on the page?
You can use marginBottom to set the bottom margin of the chart:
$('#container').highcharts({
chart: {
marginBottom: 150
}
});
that will ensure that the bottom of the chart will always remain the same size.
here you can see an example with 2 charts side-by-side, one with longer names and the other with shorter names.
http://jsfiddle.net/ktxn7ewx/
Here is the HighCharts API: http://api.highcharts.com/highcharts#chart.marginBottom
I'm trying to display axis for a grid based chart (heat map) to display correctly. I can get them into the right alignment (centered with each grid whether it be row or column), but they are on top of the grid where I want to have them displayed outside of the grids.
Here's what I have so far: http://jsbin.com/hihepo/8
Provide some margins around and translate your chart's g wrapper. You have margins defined, but they are never used, so you chart stretches until svg element borders and there's no more space around.
Use .orient('left') for y axis and .orient('bottom') for x axis orientation. See docs for orient method.
Adjust the transform and text-anchor of your x axis labels (or change the translation of their g wrapper).
Here's a demo for x axis labels.