I want to display bars from left to right with a fixed bar gap, rather than display them evenly.
I have tried to add barCategoryGap or barGap prop with fixed number, but no influence for the chart like this:
And my code is:
<BarChart data={data} barSize={10} barCategoryGap={1}>
<YAxis
...some props
/>
<Tooltip />
<Bar dataKey="responseTime">
{data.map((item, index) => (
<Cell fill={item.isPass ? '#3c763d' : '#a94442'} key={index} />
))}
</Bar>
</BarChart>
In your graph, you don't have any XAxis specified to group your bars into categories. Because of this, the props barGap and barCategoryGap won't work, since there is no category to make changes on.
To solve your problem, you should add the missing XAxis which datakey would be a prop in your data object array, that shares the same object where your Bars values come from so that they can be regrouped. Afterwards you can "play" around with the gap between the different bars, just like a demo found on Recharts for Bars.
Related
The sample I am talkin' about is here
https://recharts.org/en-US/examples/HighlightAndZoomLineChart
and here
https://codesandbox.io/s/highlight-zomm-line-chart-v77bt
Please press left button of the mouse and drag it to the right - this is how zoom is currently done. Please take a look at the activeLabel variable.
Currently recharts could make a zoom into the graph by passing the x coordinate (which is stored in activeLabel variable) and zooom looks like a pillar all over the y coordinate.
I want to select an area - square or rectangle to make more customized zoom. The trouble is that I can't get the y value of the graph (not pixel in window). Recharts gives only x coordinate of the graph, but not y.
I've searched all over the issues on gitHub, mailed the creator with no luck.
I've read the
Recharts value at pointer to show in tooltip?
but I could not get how could I count the initial values of chartX and chartY in my responsive container, so it is very depends on the window user has.
Please help me to find a solution to match chartY in pixels to my real values in my chart depending on Responsive Container I am using.
Zoom can be done by using the mouse events of the chart.
You can store the values in a state then call the zoom function on onMouseUp.
And in zoom function, you can set the domains of the axes.
Don't forget to set the axes to allowDataOverflow.
And you can also draw the rectangle by using ReferenceArea
function zoom () {
setXAxisBoundaries([rectangle[0], rectangle[1]])
setYAxisBoundaries([rectangle[2], rectangle[3]])
}
<ScatterChart
onMouseDown={(event) => setRectangle([event.xValue, event.yValue])}
onMouseMove={(event) => setRectangle(rectangle => [...rectangle, event.xValue, event.yValue]))}
onMouseUp={zoom}>
<XAxis
dataKey="x"
allowDataOverflow
domain={xAxisBoundaries}
type="number" />
<YAxis
dataKey="y"
allowDataOverflow
domain={yAxisBoundaries}
type="number" />
I am trying to do a barchart with Recharts but ticks on both axis are getting out of svg:
Do you know to solve this ?
In your example, your tick labels have an angle that puts them out of the svg zone. To turn back your tick labels like on a line, you need to either update the angle prop to 0, like the following:
<XAxis dataKey="name" angle={0} />
Removing the angle prop from the XAxis would work as well, since its default value is 0.
I have a pie chart in Dynamics CRM that has the values of the segments listed outside of the pie chart. However I am trying to get the leader lines to display from the chart to the values. What property am I missing? Here is the XML.
<Series>
<Series ShadowOffset="0" IsValueShownAsLabel="True" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PieLabelStyle=Outside, LabelsHorizontalLineSize=1, LabelsRadialLineSize=1, PieDrawingStyle=SoftEdge" ChartType="doughnut">
<SmartLabelStyle Enabled="True" />
</Series>
</Series>
The reason the lines were not showing up was because the attribute PieLineColor was not set to a color
What properties it is necessary to set view1, so that it fills the rest of the window?
<Alloy>
<Window>
<View id="view1">
</View>
<View id="view2" height="50">
</View>
</Window>
</Alloy>
<Alloy>
<Window>
<View id="view1" top="0" bottom="50" width="100%">
</View>
<View id="view2" height="50" bottom="0" width="100%">
</View>
</Window>
</Alloy>
Also it is good to put the dimensions in the style (TSS) file instead of putting them in the view XML file. If this resolves your query then mark it as an answer for the reference for the rest of the community.
There are multiple ways to fill dimensions. It depends on what kind of layout type you have used like - vertical, horizontal or composite (default).
Vertical
Aligns children below each other.
You can control width, left, right, top & bottom properties. (bottom property doesn't work for last child)
Last child can occupy rest of the vertical height of parent.
Horizontal:
Aligns children from left-to-right in horizontal plane.
Can control left, right, top & bottom properties (right property doesn't work for last child).
Last child can occupy remaining width of view
Composite or default
Most flexible if you have not oriented UI.
Can keep views anywhere using top,left,right,bottom.
Assigning left & right only will define the width. Adding width with left & right will obey width keeping left & right restrictions.
-- e.g. if left & right = 20 & width=Ti.UI.SIZE, then view will start from left & will have width as Ti.UI.SIZE & will not go beyond right=20
Same rule as above applies for height as well.
*This is a name I have seen used for the style of chart I'm after - not sure how 'official' this name is.
What I would like:
Bar Chart
X - Day of the Week
Y - Number of items
Z - Week Number, receding back into the chart.
I'm not sure that the Chart Control can do it, but I might be missing something in the many many properties and settings the control has.
After a hint from pnuts. i've dug in an read up some more on the Chart Control....
I've created a 3D 'Manhattan' style chart. There's the datasource selects data with columns such as DayName, NumberOfOrders and WeekNo.
The chart should have clustering turned off and you need to use a special databinding method.
Chart1.DataBindCrossTable(ds.GetYearsOrdersByDay, "WeekNo", "DayName", "NumberOfOrders", null);
This creates several series based on the dataset and the parameters.
Basic markup
<asp:Chart ID="Chart1" runat="server" Height="600px" Width="700px">
<Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<Area3DStyle Enable3D="True" IsClustered="false" Perspective="20"/>
<AxisY Interval="100"></AxisY>
<AxisX IntervalOffset ="1.0" Interval ="1.0" >
<MajorGrid Enabled="true" Interval="1.0" IntervalOffset="0.5" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
<Legends>
<asp:Legend Name="Legend1" Title="Number of Orders">
</asp:Legend>
</Legends>
</asp:Chart>