I am working on high charts (pie and bar). while page loads, charts are not center aligned, but as soon as I do inspect element it gets aligned. Can anyone suggest possible reasons?
In the pie chart you have center parameter which allows you to position chart.
Example: http://jsfiddle.net/40h671s3/
Related
I have three pie charts displayed in a row. Two have two segments, one has five. All three have vertical legends.
Given that, the chart with five segments displays the pie slightly smaller, due to the extra height of the legend. It also has a slight negative vertical offset.
Is there any way I can set all three charts to render the chart in the same position? I've tried setting the center to 50%,50% in plotOptions, didn't help.
You have to set the marginBottom-Value of the chart to a value that is equal an all charts. Highcharts is trying to display the pie as big as possible, therefore it will use more space if the legend is not as big.
By setting the marginBottom you force the chart to ignore the actual legend size.
The center: ['50%','50%'] setting will only take into account the actual plot area. So if this area is decreased because of a taller legend it has no effect.
I made a jsfiddle where you can explore this settings:
http://jsfiddle.net/doc_snyder/dsmgy6ts/
I am using Highcarts with React to create a dynamic line graph. On the graph there is a series for a vertical line which can be moved around the graph in response to some user inputs elsewhere on the page.
The problem I am having is that when the vertical line is dragged to either end of the graph, Highcharts automatically adjusts the plotting area to make space for it, resulting in the graph shifting to the left or right.
I would like to turn this off and allow enough space on either side of the graph so that no automatic adjustment of the graph is performed. I have tried setting margin and spacing parameters of the chart but they do not extend the plot area in the way I need.
Thanks
Does anyone have any idea how to make a graph like this? It's basically 5 in one chart, each one represents a different dynamic value up to 100%. So like the man running icon would be 60%, scale 85%, sleep 8%, ect.
The icons in the middle obviously won't be part of the graph, they'd be a div overlayed the chart.
Can anyone help? If highcharts will not work, then what will?
I am displaying pie chart and drawing labels outside of chart itself. Sometimes I must display odd data, that one point takes up 90% of chart so the rest must "mash up" into remaining 10% of the chart. Everything is okay, but the labels (slice names) are also "mashing up". So I implemented mechanism that "sorts out" those labels not to collide with each other. Now I have a "word cloud" above my chart, since the biggest slice is always facing down, leaving all other slices facing up. That is my problem: I want to rotate the chart so that the biggest value data point would be facing left (leaving me right side of chart for labels).
So my question is:
How I could rotate pie chart around its center by code?
And rotating whole chart view is not an option since labels must remain horizontal.
So i found the solution myself:
you can use this code:
[(SChartDonutSeries*)[[chart series] firstObject] setRotation:-1.570];
To rotate first (the only in my case) DonutSerie by approx -90 degrees with this line of code. I use it in this delegate method:
sChartRenderFinished
I have a stacked area chart using google charts. An example is here: https://code.google.com/apis/ajax/playground/?type=visualization#area_chart
The problem is, when I hover the cursor over an area, no tooltip is displayed. I need to hover the boundary of two neighboring areas to display the tooltip.
Is it possible to display tooltips when hovering areas? If not, do you know of some workaround?
You can use a SteppedAreaChart for this. Set isStacked to true, and by default the tooltips will be shown on hovering over an area.
No, you can't spawn the tooltips by hovering over the area. There is no way easy way to work around this, as the Visualization API does not trigger mouse events on the areas.
If you want to put the effort into this, you can create custom mouse event handlers on the chart's SVG/VML code. It might be possible to extrapolate which area the mouse is in, and given that, you can extrapolate the x-axis position from the mouse coordinates using the ChartLayoutInterface, and spawn a custom tooltip based on that information. Be aware that any solution involving the chart's SVG/VML code could break at any time, as the internal structure of the charts is not guaranteed to be stable from version to version.