I checked the docs and all I could find was to set the stroke but I need the whole xAxis background and not only font color.
#Renaldo Balaj Well, you could add an svg element to your chart like here
https://codesandbox.io/s/highlight-zomm-line-chart-forked-o18fe
But there is an issue I am struggling with: on codesandbox on resize all is ok, but in my browser those rectangles are moving out of borders while resizing, can't make them attached to axis
Related
I've searched the way to color the background of axis in my chart. Rechart doesn't provide such an option, so we need to find some way to overcome this
There was such a question and I provided the answer
Is there a way to set Background Color of XAxis
Answer can be seen on https://codesandbox.io/s/highlight-zomm-line-chart-forked-o18fe
In codesandbox it is fine in any scale.
But if I apply that code in my browser and resize the window then those rectangles moves outside of the axis. Is there any way to fix it?
The fill property can be used to set the axis background color.
<CartesianGrid strokeDasharray="3 3" fill='red'/>
The result can be seen here:
How can I overlay the legend on a column chart without?
Would I need to use absolute positioning? If so, could someone provide an example?
Please see the picture below.
https://www.amcharts.com/docs/v4/tutorials/chart-legend-in-an-external-container/
I managed this by placing the legend in another container, then setting an absolute property and overlaying the div.
var legendContainer = am4core.create("legenddiv", am4core.Container)
chart.legend.parent = legendContainer;
Is it possible to hide the black border of pie chart labels in iReport ?. I want to keep the values but not the black border. Thanks
I dont know the direct property on ireport, but you can do a customizer on the PieChar like in the example:
http://mdahlman.wordpress.com/2010/08/18/chart-customizers-1/
The SVG logo on this site doesn't look sharp on every zoom level. I read once, that SVG is just sharp on a multiple of its original size. But when I rightclick on the graphic and display it alone (without an img tag around it), it looks sharp on every possible zoom. There is no width or height given to the image.
It appears that Firefox renders the SVG to an image when referenced via an <img> tag. Use an <object> tag
I believe the issue is in Firefox.
Try to set the image width to 100% and height to the actual height of the SVG and this will solve the issue.
For Instance.
img{width:100%;
height:xxpx; /* Where 'xx' is the value of the image height in pixels */
}
Hope this Helps.
I have a pie chart which is being generated from a json string. The pie is getting created correctly but what is happening is the tooltip is getting cutoff when the text to be displayed in the tooltip is large. I have tried increasing the width and height of the svg area. But the charts are generated dynamically so i have no way of setting the chart widht and height dynamically depending on the content.
One can adjust the margins margin:[0,100,0,100], to shrink the pie chart so that the tooltips/labels will appear. This has been set to automatically scale the chart in Highcharts 3.0.
http://www.highcharts.com/component/content/article/2-news/53-highcharts-3-0-beta-released
http://github.highcharts.com/v3.0Beta/highcharts.js
http://jsfiddle.net/Zvrt6/1/
Increase Height and width of your chart div or put your code in jsfiddle if possible, so that we can get more idea
This example could be relevant to your situation- http://jsfiddle.net/4ac8b/1/. When you re-size the result pane you will notice the chart size changes accordingly.
You will need to set the size of your container so that the chart is drawn in that area itself. http://jsfiddle.net/4ac8b/. Even when you re-size the result pane the chart size wont change.
Change the diameter of your pie chart to allow additional information
http://www.highcharts.com/ref/#plotOptions-pie--size