Positioning a bubble chart properly with no legend? - javascript

I took the legend out of my bubble chart using legend: {position: 'none'}, but it leaves an empty space at the right side of the chart
What's the best way to make the chart fill up the space on the right but still show the prices properly on the left?
I tried adjusting the chartArea property but it started edging the prices off the left side (i.e., they were cut off)
See demo here
Here is a look at the chart under the inspector, you can see the empty space on the right side:

Set the chartArea.width and chartArea.left options:
chartArea: {
width: '80%',
left: '20%'
}

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:

"Inline" labels in ChartJS

Is it possible to render a chart with "inline" labels between horizontal bars in ChartJS?
You can use chartjs-plugin-datalabels for this which is very useful when displaying labels on data for any type of charts and is highly customizable.
Note that this requires Chart.js 2.7.0 or later.
Use it by including it under the plugins key of your chart options as shown in the following solutions below.
Solution #1.
The configuration below will display your labels on the top center of each bar. See working example.
var options = {
plugins: {
datalabels: {
// use the formatter function to customize the labels displayed
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
},
align: "top",
anchor: "center",
offset: 25,
padding: -2,
clip: true,
font: {
size: "16",
weight: "bold"
}
}
}
};
However, this is not exactly like the screenshot you provided so,
Solution #2.
Here's one workaround I can suggest to replicate the exact behaviour that you want.
anchor: 'start' and align: -60: that will bring your data label on top, left aligned
make your chart start at zero by setting scale.ticks.beginAtZero to true
offset: 25: distance (in pixels) to pull the label away from the anchor point
padding: function() {}: use a scriptable option to dynamically compute the left padding based on the label approximate size since adding a specific padding will only work if your labels have the same width that doesn't change which is not this case
See working example for a detailed overview of the configurations.
This solution will work but it's definitely not ideal since the
position of these labels may change depending on the label size, bar
thickness, and the size of the chart.

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 legend labels go outside canvas

I am having an issue when trying to make long legend labels to fit inside the canvas. Please have a look at the fiddle
I can't find any options or fixes for this.
How can I make the long labels to fit inside the plot area? Please advice.
Simply set width for legend and for items, to tell Highcharts what is proper width. Example: http://jsfiddle.net/Fusher/xvpj7frs/3/
legend: {
width: 300,
itemStyle: {
width: '250px'
}
},
Of course that solution has limitation - legend isn't responsive anymore.

Percentage for left style of a custom label in highcharts

In one of my highcharts charts, I have a label set up as follows:
labels: {
items: [{
html: 'All Industries',
style: {
left: '80%',
top: '85px',
color: 'black'
}
}]
}
I am finding that the label is only showing up about 15% of the way across the chart, rather than 80%. Now, it seems, the percentage is a percentage of SOMETHING, because if I set the percentage to, say, 550%, it will move to the right significantly. However, I can't figure out what exactly the percentage is being measured against. Anybody have any experience with this? Do you know how I can position this label 80% of the way across the chart area for a chart that's likely to be resized dynamically?
Unfortuantely percentage values are not supported, so need to be value in pixels.

Categories