Highcharts: Align multiple charts in same container - javascript

Following this demo here (http://www.highcharts.com/docs/chart-and-series-types/combining-chart-types) I am trying to have a Pie chart and a bar chart on the same page.
The catch is I would like the Pie chart to be large on the left and then the bar chart on the right. I see the code to move the pie chart around, but I cannot figure out how to do the same with the bar chart, as it seems to want to span the entire container width. I understand that I could have two independent charts and place them in their own floating DIVs, but since the combining of charts is possible, I thought this would be a viable option.

You can set chart.marginLeft to half of the chart width. And set pie.center x coordinate to a negative value.
chart: {
marginLeft: 400
},
series: [{
center: ['-75%', '50%'],
example: http://jsfiddle.net/L55w9n53/

Related

How to center title vertically in HighCharts pie/donut chart?

I have a HighCharts Pie chart configured as a "donut" style, and I set the title "verticalAlign" to "middle" but this seems to center the title in the whole area taken up by the chart (including the legend) which is fine for a few data points, but once the chart has many points added, the title starts overlapping the colored segments and even the legend. Is there a way to center the title in just the donut?
Example:
Highcharts has quite a number of ways to adjust the style. Not clear how you display your title, but it seems that the problem is in the height of your legend. One way to go is to adjust the 'y' parameter of the title to move title a little:
title: {
text: 'A title to move',
align: 'center',
verticalAlign: 'middle',
y: -20,
}
Drawback is that it may not fill all the possible chart content, so you have to somehow estimate how much you want to adjust the 'y'.
https://api.highcharts.com/highcharts/title.y
After much trial and error, the final solution for my specific use-case involved:
Fixing the 'chart.spacingTop' parameter to 10 pixels. This fixed the top of the chart so it wouldn't dynamically change in the vertical space.
Setting 'plotOptions.pie.size' to '250px'. This fixed the pie size to 250px regardless of how many points were shown.
Setting 'plotOptions.pie.center' to '['50%', 105]'. This centered the chart at 50% width, 105px from the top.
Limiting my series to 24 data points max (to avoid a legend that was too long to manage)
Finally, I created a <div> right before the chart container that allowed me to use CSS to set it relative to the chart, positioning my label right in the center of the donut.
The result:

Increase spacing between legend and -chartartJs

I have a bar chart where I have drawn 3 vertical lines, each with it's own label at the top. I would like those labels to be above the top of the y-axis (above the 30% line in the example) but below the legend. I can't figure out how to increase the space between the top legend and the chart such that I can have my vertical line labels (15, 24 & 33) be off of the chart itself but below the legend. Any ideas?
I assume you are using chart.js. If yes, you can use custom HTML legends and apply style rules to them. Start your chart with the normal legends hidden and apply the generateLegend() method to a custom div.
var customChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
legend: {
//Because you are going to show your own legend
display: false
}
}
});
//insert legend to any div of your liking and manipulate via CSS
document.getElementById("custom-legend").innerHTML = customChart.generateLegend()
Documentation: http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends
Fiddle example: https://jsfiddle.net/gmyy3rf5/

Legends display order using highcharts in pie chart

Using highcharts, legends are displayed in a horizontal manner. I am trying to display in vertical order (one series below the other) but I could not find any solutions for that.
In the image below, the order of legends are horizontal. Can someone help me figure out how to display the legend in a vertical order?
Use this snippet, it will place the label vertically in bottom of chart:
legend: {
verticalAlign: 'bottom',
layout: 'vertical
},
You can check it with this fiddler.

Highcharts pie chart dynamically changes size

I am having an issue with a pie chart I created in highcharts.
Depending on the placement of the data labels the actual chart will grow or shrink.
We need the pie chart to stay the same size so is there a way to keep the pie size constant and force the labels to fit around it or do I just have to place the labels inside each slice?
You will have to set a fixed size for the pie chart. Can be a percentage or a pixel value. For example:
plotOptions: {
pie: {
size: 100
}
},
See this fiddle from the API http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/pie-size/

JqPlot pie chart jqplot-event-canvas position top left

I've just started using JqPlot and want to display a small chart
However there is always a small margin at the top and to the left.
Looking at the css produced the jqplot-event-canvas is given absolute position with top and left set at 10px.
Is there a simple way to solve this so that the pie is positioned without the extra spacing?
I've tried to set the padding to 0 in the grid and pie rendererOptions.
Also set show:false on the axes, title, ledgend ...,
Any ideas?
Try setting the gridPadding like this:
var plot1 = $.jqplot('pie1', [data], {
gridPadding: {top:0, bottom:0, left:0, right:0},
....
Because by default, each plot has the following grid padding:
{top:10, right:10, bottom:23, left:10};
I think this might explain the issue you are seeing.

Categories