I am using Anychart to generate a donut chart on a test website. I have the following code in my web page:
<div id="container" style="width: 500px; height: 400px;">
<script language="javascript">
var data = anychart.data.set([
['aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', 34],
['bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb', 21],
['cccccccccccccccccccccccccccccccccccccccc', 15],
['dddddddddddddddddddddddddddddddddddddddd', 11],
['eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee', 6],
['ffffffffffffffffffffffffffffffffffffffff', 13]]);
// create a pie chart with the data
var chart = anychart.pie(data)
// set the chart radius making a donut chart
chart.innerRadius('55%');
// set the position of labels
chart.labels().position('outside');
//chart.legend().position('right').itemsLayout('vertical');
chart.title('')
chart.container('container');
chart.draw();
</script>
</div>
This generates a nice donut chart but the legends are generated at the bottom of the chart with right and left arrows so the user can scroll through the legend.
When I uncomment the chart.legend().position('right').itemsLayout('vertical') command, the legends get generated to the right of the chart, but the chart disappears. Here is a screen print of the before and after.
Any idea on how to get the legend to appear to the right of the donut? Eventually, I will be using this to dynamically generate the chart so there is the possibility of being up to 50 data points.
Thank you.
It is expected behavior because the legend items have very long text. To solve the issue you should limit the legend width to provide more space for the chart itself. Simply add the line below:
chart.legend().width('30%').padding(0);
You can adjust the desired width in percents or pixels .width(100);.
Related
In Data Studio my 10 points pie chart is like below:
As you can see there is a navigation arrow in the legend at the top of the pie.
I wonder how can I avoid the navigation by creating the multiline legend? How can I wrap the current single line legend?
Three ways to display all items in the legend; located in the Style Tab of the Pie Chart (added a GIF to elaborate):
Increasing the max lines;
Increasing the width of the Pie Chart;
Reducing the font size of the legend.
EDIT: Multi line Legend (Workaround using a Bar Chart)
How about using the legend from a Bar Chart? Added a GIF to elaborate as well as a few points:
Bar Chart: Use a Dimension and Breakdown Dimension that's the same as the one on the Pie Chart and enable the legend (Top) as well as using 2 lines (no legend for the Pie Chart)
Shape: Add a Shape over the Bar Chart (one that blends in with the background)
Order: Right click on components and select Order from the drop down to change the order of the components (Bar Chart: Send to back; Shape: Send Backwards (behind the Pie Chart); Pie Chart: Bring to Front)
Fine Tuning: Use Shift + Movement for precision placement (to get the shape exactly where you want it)
I am using JFreeChart to create pie charts. I want to set a label inside pie section.But some part of label goes out side of pie section. Please can any one help me? I want to set this label inside the section only.
plot.setLabelFont(new Font("SansSerif", Font.PLAIN, 12));
plot.setNoDataMessage("No data available");
plot.setCircular(true);
plot.setLabelPaint(Color.DARK_GRAY);
plot.setSimpleLabels(true);
Ran this example from Angular NVD3's 'live edit' area.
http://krispo.github.io/angular-nvd3/#/
I opened it in Plunkr: Stacked Area Chart
As per the documentation,you need to add the following code, to hide the x and y axes.
showXAxis: false,
showYAxis: false,
You can add it after line number 19(in plunkr -> app.js)
After adding the above code, it doesn't work. The chart shows up and then dissapears.
But the same works for other charts, except for stacked area chart.
[I have tried it on line-chart, filled-line-chart, bar-chart]
Awaiting a reply.
Ok,
Figured this one out.
Zoom is enabled for this chart (app.js -> line:31)
Rolling the mouse zooms into the chart, and it expects the axis to be enabled (to understand the chart better).
Disabling the axis for a zoomable chart may not make sense, as one would not understand, what portion/section of the chart is showing after you have zoomed in.
Thank you. :-)
I am not able to display bar chart series label horizontally outside the bars.
Used display:'outside' and orientation:'horizontal' for bar chart label configuration, still no results.
Is it a bug in 5.0.0 or is there any other way to display label horizontally ?
I am new to angularjs,i made a donut pie chart using google charts now i want to change the legend shape because default shape is circle but i needed square.
google chart append all code for pie charts on load when page render in browser ,so how can i capture the element for legend shape using jquery and change it from circle to square.The element for legend is really down in hierarchy inside the main div so how its possible.
my html for pie charts:
<div class="chart-container">
<div class="chart-title" style="padding-right:7em;">Total Calls</div>
<div google-chart chart="data"></div>
</div>
you can see in snapshot that how google chart append the pie chart inside my html.Inside svg element there is a g element and that g have some other g elements and first g is for legends.
any guide thanks