I'm using recharts to create pie charts. When look at this example, http://recharts.org/#/en-US/examples/PieResponsiveContainer the pie chart can be centered using ResponsiveContainer component.
But my attempt failed : https://codesandbox.io/s/ll68p643xl. Try to change the size of the viewport to a larger width, the pie isn't center anymore. I wonder what's wrong here.
ResponsiveContainer just makes the pie take the size of its container. If you inspect the html, you will see that the container is in fact the size of its parent. If you want to center it, you can make the container not take the whole parent, and use css. Something like this:
.pie-row .pie-wrap > div {
background: red;
margin: 0 auto;
}
And then the container:
<ResponsiveContainer className="container" height={70} width='30%'>
I know this is a late answer, but for anyone who is trying to center <PieChart> with width and height, pass cx prop to half the width of <PieChart>.
Like,
<PieChart width={this.props.width} height={this.props.height}>
<Pie
cx={this.props.width / 2}
cy={200}
label
outerRadius={this.props.pieData.radius}
data={this.props.pieData.data}
dataKey={this.props.pieData.dataKey}>
</Pie>
</PieChart>
Related
I am attempting to resize a canvas chart when a user resizes their browser window. The problem with changing it directly, or so I've found...is that the image disappears during the resizing. Here are some screenshots to help you understand my problem.
This is the chart before resizing.
This is the chart during the resizing. (without targeting the DOM element)
I've identified the chart overflowing on the right hand side.
Chart being resized and targeting the canvas width.
As you can see, the chart disappears.
let canvas = document.getElementById('canvas');
this.canvas.width = ${
event.target.innerWidth - (window.innerWidth / 100) * 2
};
Please let me know what options I have for dynamically resizing canvas charts. Thanks!
P.S. I'm using AngularJs for this particular project.
Update 12/30/2020
Discovered that the obvious reason for the chart disappearing is that the canvas is based on coordinates which originate from a set height/width. So the solution was re-mapping the strokes/fills as the canvas is resizing.
New challenge:
Using clearRect (0, 0, width, height) doesn't clear the canvas. Re-mapping results in an inifite mapping of charts on top of one another. As shown in the photo below.
Is this the solution I get paid a million dollars for? No. But...
After hours of spinning around thoughts as to why the creators never made an easy solution for resizing a canvas, I've finally found an option that works for resizing the charts. Note that if you're scaling up that it can become pixelated. But this option will work.
Instead of defining the height and width with the inline properties:
<canvas id="canvas" height="200" width="600" (window:resize)="onResize($event)"> </canvas>
You should use css to make the height and width 100%. This turns the canvas into an image essentially. Which is why it pixelates when you scale up. The next step is to setup functionality or styling for the element that the canvas is embedded within. This is where the solution arises. Because you can't adjust the canvas without losing the graphic. You have to adjust the element that encapsulates it!
Ex:
<div id="area-chart">
<canvas id="canvas" (window:resize)="onResize($event)"> </canvas>
</div>
You would dynamically adjust the height and width of the #area-chart. I personally suggest using viewport width to define the height as it is the most flexible in terms of scaling and the graphic pixelates far less than using other measurements (%, px, pt, etc.). Of course your needs may be different than mine, but here's some sample styling.
Sample scss:
#area-chart {
#canvas {
width: 100%;
height: 10vw;
}
}
Chart on load:
Chart scaled down:
Chart scaled up:
** note that the pixel dimensions in the screenshots are the full window size and not the size of the element
All examples of pie charts (with outside labels and lines) use labels positioned around the circle (diagram A below). The problem is that a container where my pie chart should be located has a width constrain equal to the width of the pie chart.
1) Is it possible to position the labels like on diagram B below?
2) Is there any other solution addressing my problem?
NB! The labels cannot be placed inside the circle. I am happy to use any JavaScript library to achieve the required result.
Please go to http://jsfiddle.net/thudfactor/HdwTH/ and do a view source in the pie chart area (please give credit to this author). Paste the source into your IDE.
Make these modifications:
// Store our chart dimensions
cDim = {
height: 300, //500
width: 300,//500
innerRadius: 50,
outerRadius: 150,
labelRadius: 150 //175
}
This uses the d3.js library
I've tried looking for a fix to this problem but wasn't able to find one that pertained to the haxis labels...
In the picture below, you'll notice that the last percentage label on the haxis is not showing up. I'm not sure what the issue is. I've tried messing around with the chartArea width and left values but that didnt seem to work. I've also made sure that the containing div is wide enough so it's not cutting off the '100%' label.
Any ideas?
Update w/ jsFiddle
jsFiddle with my code
<body bgcolor = "black">
<div id="chart_language_div"></div>
<div id="chart_api_div"></div>
<div id="chart_software_div"></div>
</body>
As you can see from my div declarations, I don't have any containing divs in the example and the issue still exists.
Here is your problem code
chartArea: {left: 140, width:'80%', height:'70%'},
Here is a solution
chartArea: {left: 140, width: 420, height:'70%'},
Basically, you were right about the label not being created. Looks like Google is checking the chart width before making the label, so rather than the browser clipping the label, Google charts never creates it.
So with a containing div of 580, a left attribute of 140, and a chart width of 80% (464px), you were overflowing. The math is 464+140 = 604, which is greater than your containing element width (580). Setting the width to a flat 420 gives you 120+420=560, leaving 20px for the label on the right side.
I'd recommend never mixing percentages and fixed widths (that goes for every layout engine I've dealt with). Having a percentage height and fixed width is fine.
Jsfiddle: http://jsfiddle.net/sbo2ggp3/4/
Here is a JSFiddle of what I currently have:
http://jsfiddle.net/DGwcF/
I have set both the margin and spacing to 0, though the padding still remains around the chart itself.
How do I make the chart go all the way to the edge of the container? Thank you!
You need to set pane's size as 100%, see this:
http://jsfiddle.net/DGwcF/3/
pane:{
size: '100%',
}
I am using jqplot for charting report in my current application..
I have one ChartCtrl div which is using as a chart placeholder.
And one Parent Div is controlled for positioning chart in page. I am calculating the width of the chart dynamically based on the no. of bars are present and initiate the scroll for the same for parent div, so that if more bars are plotted i can scroll the chart horizontally.
But when I scroll the chart, the Left Yaxis is also scrolling which is expected.. But is there any way to fix the left Y-axis only the chart content is scrollable in jqplot.
Please provide some suggestions on this.
I also have the same issue, but I solved by using little bit change in jqplot.css. Just in your html add this style class:
<style type="text/css">
.jqplot-axis.jqplot-yaxis{
position : fixed !important;
}
.jqplot-series-canvas {
overflow-x : scroll;
}
</style>
If your problem is solved then just vote...