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
Related
I've got a line-chart with potentially more than 10 points. It will be drawn inside a container element with fixed width (let's say 800px).
In case the points count gets more than 10, I need to make the chart scrollable in a way which initially displays only the last 10 points.
Here's the fiddle for what I have right now:
https://jsfiddle.net/kpx13oz9/69/
Currently, I have the scroll-bar initially sitting on the rightmost position (which is what I want). But, as I increase the number of totalItemCount, more points are included inside the scrollable plot and some of the ticks on the x-axis become hidden.
I'm looking for a configuration which enforces the following:
regardless of the number of points, display the latest 10 points. the rest of the points will be accessible by horizontal scrollbar.
All the ticks on the x-axis need to be displayed always. No auto-hide.
You can dynamically calculate the minWidth property based on the created chart. To show all of the labels, set xAxis.tickInterval to one day.
chart: {
events: {
load: function() {
const minWidth = this.plotSizeX / 9 * workOrderHistory.length;
this.update({
chart: {
scrollablePlotArea: {
scrollPositionX: 1,
minWidth
}
}
}, false);
this.xAxis[0].update({
width: '100%'
});
},
render: drawCrosshair(crosshair, 'red')
}
}
Live demo: https://jsfiddle.net/BlackLabel/v3zowk9e/
API Reference: https://api.highcharts.com/highcharts/xAxis
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.
I have a set of HighCharts line charts that are in containers that all have the same width. These containers are stacked one on top of the other in a column. All the charts are against the same x-axis domain by design. However, because the orders of magnitude of the y-axis data in each of these charts differs, the amount of space used to the left of the primary and right of the secondary y-axes is coming out variable. The result is that the x-axis of each chart in the column is variably squished and the data points for the same x-value don't align visually. Here's an example, note that the bottom-most chart is not aligned to the two above it:
Is there a way to calculate or otherwise set up a situation using the HighCharts API where I can coerce all the charts to take up the same width between the primary and secondary y-axes across all three charts?
You can set fixed marginLeft and marginRight for all charts:
chart: {
marginLeft: 50,
marginRight: 20
}
Live demo: http://jsfiddle.net/BlackLabel/xsuc7aeg/
API:
https://api.highcharts.com/highcharts/chart.marginRight
https://api.highcharts.com/highcharts/chart.marginLeft
Or you can calculate the margins dynamically:
charts.forEach(function(chart) {
maxPlotRight = Math.max(
chart.chartWidth - (chart.plotLeft + chart.plotSizeX),
maxPlotRight
);
maxPlotLeft = Math.max(chart.plotLeft, maxPlotLeft);
});
charts.forEach(function(chart) {
chart.update({
chart: {
marginLeft: maxPlotLeft,
marginRight: maxPlotRight + 10
}
})
});
Live demo: http://jsfiddle.net/BlackLabel/6ubh8zj7/
API: https://api.highcharts.com/class-reference/Highcharts.Chart#update
Is there any configuration layout option to increase the space between the bars in a bar plot in plotly.js ?
I tried increasing the width of the plot but it is expanding the plot as a whole.I need to fix the width of the bar and space between the bars.
Any help would be highly helpful.
It is a setting of layout The key value pair for the layout object to change the gap is bargap. For example given arrays x and y:
Plotly.newPlot('myDiv', [{x:x, y:y, type:'bar'}],{title:'title',xaxis: {title: 'abscissa'},yaxis:{title:'ordinate'},bargap:0});
Will generate a plot with no gap like a histogram.
All examples of pie charts (with outside labels and lines) use labels positioned around the circle (diagram A below). The problem is that a container where my pie chart should be located has a width constrain equal to the width of the pie chart.
1) Is it possible to position the labels like on diagram B below?
2) Is there any other solution addressing my problem?
NB! The labels cannot be placed inside the circle. I am happy to use any JavaScript library to achieve the required result.
Please go to http://jsfiddle.net/thudfactor/HdwTH/ and do a view source in the pie chart area (please give credit to this author). Paste the source into your IDE.
Make these modifications:
// Store our chart dimensions
cDim = {
height: 300, //500
width: 300,//500
innerRadius: 50,
outerRadius: 150,
labelRadius: 150 //175
}
This uses the d3.js library