Highcharts legend labels go outside canvas - javascript

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.

Related

Make chart width exclude x axis labels

Is it possible in highcharts to make the chart width, the plotting area the same width whether there are labels or not?
For example, both these charts have width 150 but one looks thinner than the other because it has the labels enabled.
I can do this programmatically but it is a bit messy. Is there a way?. I tried, for example, to set the label as enabled but not visible but this combination of options does not exist.
Thanks for any help
You can set fixed chart margin:
chart: {
marginBottom: 20
}
Live demo: http://jsfiddle.net/BlackLabel/st8c0r1p/
API Reference: https://api.highcharts.com/highcharts/chart.marginBottom

Highcharts issue when dealing with 3D pie and large labels

I am using highcharts 3D pie and if some label is a little bit long it does not resize correctly.
Here it is an example which I have taken from highcharts documentation and forked it for getting large labels.
http://jsfiddle.net/78wr256o/
It is important to mention that I would prefer to display the whole name and not cropping it. Resizing correctly the chart, keeping it centered and moving labels position if it is possible.
This is the initial version:
This is exactly the same chart but with a large label:
You can use html and css to format data labels.
series: [{...
dataLabels: {
useHTML: true,
style: {
"width": "30px"
}
......
Here is an example http://jsfiddle.net/8d517w3v/
It doesn't crop rather wrap labels around and make graph centered.

How to set width limitation for text in highcharts?

I am using a pie chart for my diagram. The problems is sometimes the text or the name of a category is really long and it makes my pie chart gets smaller than usual.
How I can set a width limitation for each text?
This is my pie chart with a long category name:
Here
Answered here, and here is a fiddle that demonstrates.
In brief - you can add a style to the dataLabels:
style: {
width: '50px'
}

Positioning a bubble chart properly with no legend?

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%'
}

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