I am designing an HighCharts bubble chart (a matrix with coloured fields, drawn using SVG), that should have some text explaining the axis values outside of the actual chart area.
That is, because the axis values are A-E and need a lengthy explanation (A = Always exceeds goals bla bla etc.).
These explanations should be visible - next to the chart, not in it, and not in tooltips because these cannot be printed.
My question: Can I put SVG <text/> outside of the plot area? HighCharts seems to stretch the plot area as far as it can, leaving no space to either side.
You can use text text and define css styles i.e: position:absolute;left:20px;top:20px;
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
I am helping my organization put together some Pie and Donut charts using Highcharts, and some of our charts will have zero value points. Normal behavior is to not render these points out, but that leaves us with an empty chart.
So, is there a way to set a "background" circle for the Donut chart so that if all values are zero, the user still sees a gray donut (indicating "0" values)?
I don't want to use something like a background image because then it may not adjust responsively in a proper manner. Plus, we'd like the parameters of the circle to be adjustable just like other data elements in Highcharts.
Thanks for any and all advice!
I have multiple Y axis and to differentiate the Y axis I want to display the legend icon just beside Y axis. So is there any way to do this I know we can make the Yaxis itself as the color matching with series but unfortunately that is not needed.
Highcharts is super nice because most text elements will have a style element associated with them. This uses CSS to style the text element for you.
So you can make the yAxis.title.style red or whatever color you want. This isn't just for titles, you can also make the values of the axis a certain color as well with style (make them red, or whatever you want).
The problem starts with the fact i have a very small area to plot a chart and i need to have markers on it as well. Now because of the small area, the markers are getting cut off and they are a key piece of information. So is there any way by which i can add some spacing between the border of the plot and the actual start of the data plot itself ?
Heres a running example: https://dl.dropboxusercontent.com/u/138190/charts/index.html
Set minPadding and maxPadding for xAxis. This will work as long, as yod don't have scrolling/panning options enabled.