What's the difference for 'pie'.
{legend: {enabled: true}}
and
{plotOptions: {pie: {showInLegend: true}}}
Legend; is an option which allows you to change all the settings about the legend. (color, border width, shadow, padding, margin etc.)
plotOptions.pie.showInLegend is a boolean if a particular serie is going to be shown in the legend or not.
Related
HEATMAP
Take a look at the chart attached. I tried to set properties of legend for heatmap but nothing worked. Is there a way I can set this legend height according to chart height. I was able to change heatmap height but not the legend. Also, how can i reverse the legend numbers order in descending order?
this is what I used to display legend when creating chart, but its not showing legend numbers in descending order, neither does it changes the height to cover full map height.
You need to set proper symbolHeight for legend and disable reversed for color-axis.
colorAxis: {
...,
reversed: false
},
legend: {
...,
symbolHeight: 280
}
Live demo: https://jsfiddle.net/BlackLabel/2r0Lbt6d/
API Reference:
https://api.highcharts.com/highcharts/colorAxis
https://api.highcharts.com/highcharts/legend.symbolHeight
When useHTML is set to false, is it possible to set a text shadow with similar parameters as is possible with the text-shadow CSS property? In particular, can you offset the shadow relative to the text (e.g. to the lower right), or is it always just an outline around the text? The highcharts docs suggest that it's only possible to set an amount and colour (e.g. "textOutline": "1px contrast"), or in other words that you can't offset the "shadow"... it really is just an "outline" when useHTML is set to false. (There are reasons why I cannot just set useHTML to true in some situations.)
You can be sure that the documented options will work, the others are experimental. You should use shadow property or shadow method to add shadow to your data labels:
shadow: {
color: 'red',
offsetX: 0,
offsetY: 0,
width: 10
}
API:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#shadow
https://api.highcharts.com/highcharts/chart.shadow
Live demo: http://jsfiddle.net/BlackLabel/bcy6hwLq/
You should also consider using styled mode: https://www.highcharts.com/docs/chart-design-and-style/gradients-shadows-and-patterns
I have two bar charts, drawn using highcharts library, on a single page. I need to maintain same width for bars and same spacing between bars in a group, across these charts. Size of container is different across the charts and fixed as per the UI layout.
Snippet of plot options:
series: {
grouping:true,
groupPadding:0.12,
borderWidth: 0,
events: {
legendItemClick: function () {
return false;
}
}
}
I have tried various combinations and a jsfiddle link is here - http://jsfiddle.net/U6mhy/29/
In the above link, though the bar width is same between the two charts, spacing between bars in a single group is not same. In fact, bars in chart1 hardly appear to be grouped.
I have tried specifying different values of groupPadding, pointPadding and pointWidth but unable to achieve consistent spacing between bars across these charts.
Please suggest if any other combination of options can help me achieve this.
-Thanks
Just to make it clear, you can use one of (not both):
pointWidth: forces Highcharts to draw bars with fixed width,
pointPadding + groupPadding: calculates width of the bar according to these values and chart width/height
Just think about this: how to set the same width of the bar for all charts when you have different number of bars? And the answer is to change charts' width according to number of columns. For example you have 4 bars? Chart height/width will be sum: 4 x 10px + some_padding. If you have 10 bars, when height/width will be: 10 x 10px + some_padding (the same as above). I hope that's what you want to achieve.
With Highcharts 3.0 it is possible to create charts with type 'bubble', whereas prior to 3.0 it was necessary to use a 'scatter' chart and modify marker size to make bubble charts. The nice thing about the old way is you had complete control over the visible pixel radius of each bubble--the new bubble charts automatically resize the bubbles so they are sized relative to each other. Is there any way to turn off this behavior or set bubble radius manually?
I am having a hard time seeing how a bubble chart, where the bubbles are not sized relative to each other, would be of any use.
You should be able to use the minSize and maxSize options, however, to control them the way that you need to:
bubble: {
minSize:2,
maxSize:50
}
{{edit:
I don't see them in the docs either, actually. But you can see an example here: http://jsfiddle.net/fXzke/13/ use either number as pixel value, or string with percent of chart height
}}
I found that adding an "empty" bubble to the series helps keep the size of all bubbles in the chart relative to each other:
name: '',
data: [{x:0,y:0,z:0}],
showInLegend: false,
color: 'transparent',
enableMouseTracking: false
Here's a sample on JSFiddle: http://jsfiddle.net/9bebT/2/. The legend, color, and mouse tracking variables each help keep the item in the series but otherwise invisible to the user. If you simply remove the empty bubble or set its visibility to "false," the chart doesn't register the empty bubble's z axis (diameter) as the minSize.
As you can see from the attached image, my x-axis categories are getting bunched together in the middle. How can I configure highcharts to take up more of the x-axis? Note: The chart size is dynamic, it grows and shrinks based on the overall browser size and split-panels within the app. So explicit computation of the point-width is not an option (I expect highcharts to do the work for me).
Note: The picture is vertically cropped.
The chart options I'm using are:
highchart.setAnimation(false);
Legend legend = new Legend();
legend.setEnabled(false);
highchart.setLegend(legend);
highchart.getXAxis().setCategories(result.getAxisXCategories().toArray(new String[] {}));
highchart.setType(Series.Type.COLUMN);
ColumnPlotOptions options = new ColumnPlotOptions();
options.setStacking(Stacking.NORMAL);
options.setGroupPadding(0);
options.setAnimation(true);
highchart.setColumnPlotOptions(options);
In other words, legend is turned off and column plot options is set to zero group-padding.
UPDATE: Here is a JSFiddle showing the same issue
For others who run into the same issue, the solution is to set the pointRange option of the ColumnPlotOptions. In JSON this looks like:
"plotOptions": {
"column": {
"stacking": "normal",
pointRange: 1,
"groupPadding": 0
}
}
In GWT-Highcharts, you don't actually have a specific API for pointRange. Therefore set a generic option like this:
ColumnPlotOptions options = new ColumnPlotOptions();
options.setOption("pointRange", 1.0);
...
You can try to set pointWidth() http://api.highcharts.com/highcharts#plotOptions.column.pointWidth