I’m using 3D Highcharts. Data labels works fine for 2D charts but I’m facing issue with data label positioning after 3D projection.I’ve attached the screenshot and code snippet here for your reference.
Expected behaviour:
Data labels should be properly positioned appropriate to x-axis values.It should not go out of chart for extremely low values of series data.
Actual behaviour:
options3d = {
enabled: true,
alpha: 15,
beta: 15,
depth: 40
};
Description:
Consider the above screenshot having series data=[1,37,790,1962] and [4,2130,342,1302].Placement of datalabels for data ‘1’ and ‘1302’ are not aligned properly.We can achieve proper alignment of datalabels by changing alpha and beta values.But I’m looking for a proper fix that will allow me to achieve this.Thanks in advance.
Related
I am using iOS charts library and in my application there could be lots of x axis values for my bar chart view but, I need to show few of them. I have tried to do it with barChartView.setVisibleXRangeMaximum(12) though it is causing some weird issues. (Like Bar chart's bar fill all x-axis) Instead of using that function I am trying to use zoom property barChartView.zoom(scaleX: 4, scaleY: 0, x: 0, y: 0) . However, I am not sure how many x axis values come when I draw the chart. In some cases, it's 60,84 or 800. How can I calculate right zoom ratio to accomplish for showing 10-12(any number between them enough for me) x-Axis values?
You might want to use:
barChartView.setVisibleXRange(minXRange: 10.0, maxXRange: 12.0)
instead of:
barChartView.setVisibleXRangeMaximum(12.0)
I am using Highcharts and have initialized a pie chart, but with 4 pies in it, lined up in a row. Each pie has 2 slices, the second one is always transparent and has no datalabel, so every single chart has only 1 data label to show a value.
The only thing I want is to center the data label below the pie chart.
The problem is that dependent on the size of the visible slice the data label is moving because it is kinda bound to it?
Image to show the problem and the current state:
I tried to position the labels by using x and distance:
plotOptions: {
pie: {
dataLabels: {
distance: 0,
x: -100
which is actually working; I would have to fix the position for each chart and its data label.
But since the chart data can be changed by click the filled slice will change and so the data labels would reposition themselves. So I kinda need a way to fix their position relative to the center of the chart or something like that.
Thanks to Sebastian Bochan for the comment. I ended up using the renderer:
this.renderer.label(
this.series[0].data[0].name + '<br>'
+ Highcharts.numberFormat(this.series[0].data[0].percentage, 2)+'%',
80, 320,'callout')}).add();
Just an example. The 80 and 320 here set the position of the label in the plot area. Renderer
Using the Highcharts example posted here how can you ensure that the Font Awesome icons will be positioned exactly in the middle of the data point like the native symbols/markers are? It gets called like this in the data series and uses the "plugin" that is found in that same Fiddle:
marker: {
symbol: 'text:\uf183' // fa-male
}
Using that example, if you toggle the series on/off a couple of times or zoom in/out the icons are no longer visually accurate, often displaying above the actual coordinate. In the image below you'd believe that data point had a value >50 based on where the icon is.
Their SVGRenderer example here doesn't seem to be effected.
It looks like problem with re-rendering icons later - height of the marker isn't considered. I suggest to change a bit logic for rendering icon:
var text = symbol.split(':')[1],
svgElem = this.text(text, x, y)
.attr({
translateY: h, // translate marker
translateX: -1
})
.css({
fontFamily: 'FontAwesome',
fontSize: h * 2
});
See demo: http://jsfiddle.net/2A7Zf/29/
If you want to use the markers XL-sized (i.e larger radius) for a custom chart (e.g. a Yes/No prevalence chart using the x and check icons, circle empty for the less prevalent one and circle filled for the more prevalent one and data labels showing counts/%s), then I'd recommend this tweak to center the symbols:
translateX: -w/2 + options.radius/4 - 3
Highcharts columns sometimes don't make proper use of the available height, in some cases leaving nearly the upper half of a chart empty. After fiddling with the official example charts I noticed that the y-axis max extreme (internally) seems to be dependent on the chart's container height.
For example, the Highcharts example for stacked column chart:
The original example (container height of 400px) has a max of 12.5 for the y-axis with the largest columns having a value of 11. ~90% of the chart height are used.
When modifying the height to 300px, y-axis max changes to 15, so that only ~75% of the height is used.
When modifying the height to 200px, y-axis max changes to 20, only ~55% of the height being used.
Is there a way to improve this behavior without programmatically setting the axis extremes whenever the displayed data changes? You might argue that applying such a small height to a column chart is a weird thing to do, but this is just an example, I have seen similar behavior with larger charts (having other data).
This is related with fact, that defaulty highcharts has enabled maxPadding. Set that parameter as 0 to fillout area more efficient.
yAxis: {
maxPadding:0
}
The example charts could be fixed with Sebastian's answer. After applying the change to my own chart, I noticed another problem that screwed up the scale even more, but was not part of this question - adding this as another answer, just for the sake of completeness.
My chart consisted of combined column/line chart with a 2nd y-axis. Depending on its values, the line chart series had strange effects on the scale of the columns (even if the line chart series was empty). Doing some more research I found this SO answer pointing me to Highcharts' alignTicks option, setting it to false resolved the issue.
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.