I'm using recharts library to create a chart. The x axis of the chart is the timeline axis and I use timestamps as values for it. What I'm trying to do is to display only 5 ticks(for example) spaced equally. I found a lot of people having similar problems on the library git repository. One fixes was to use scale="time" and setting a minimum tick gap for x axis:
<XAxis dataKey='timestamp'
domain={['dataMin', 'dataMax']}
type = 'number'
scale="time"
minTickGap={120}
tickCount={7} */
tickFormatter = {(unixTime) => moment(unixTime).format('DD MMM')}
/>
I'm using the brush component of the library to zoom in on the chart and the problem with this implementation is that when I zoom in sometimes it displays all the ticks.
Ex. without zoom in:
Ex zooming in:
I found that if I remove the scale="time" parameter and set a specific tickCount and set interval to 0 the problem that occurs when I zoom in disappears but 1 tick is missing or it appears only when I zoom in.
<XAxis dataKey='timestamp'
domain={['dataMin', 'dataMax']}
type = 'number'
interval={0}
tickCount={7}
tickFormatter = {(unixTime) => moment(unixTime).format('DD MMM')}
/>
Does anyone now how can I fix the issues mentioned above? I don't think I can use predefined ticks based on maximum and minimum values of the axis because those values becomes irrelevant when I zoom in.
There is no cure for it as far as I know. You could mention all your tick explicitly in ticks param like ticks={[10,20,50,200,500,1000]} and they will do just fine
Another workaround for me is to set domain as
domain= {['auto','auto']}
and it shows all the ticks correctly.
Related
I am using Recharts Library for the graph in the ReactJS. There is one strange issue of setting intervals for the Y-Axis. There are few options available "preserveStart" | "preserveEnd" | "preserveStartEnd" | Number. For me, this is not working.
I have attached a couple of screens to showcase what I am expecting and what I get.
Expectation
Actual
Note: Due to the confidentiality of the project, I am not allowed to put the code here. Please let me know if more information is required.
In order to see a given number of ticks on the Y-Axis, you need to use the props tickCount - the number of ticks to show (by default, it's 5).
So you're Y-Axis should simply look like this:
<YAxis tickCount={10} />
The interval props allows you to show only a part of the ticks; '0' would show all, '1' would show half (1 every 2 ticks), etc.
i'm using anychart stock 8.1.0. I have a dataset with 24 hours of date with per-second resolution. I would like for only a small 30 seconds subset of that data to be shown/zoomed on load.
I could not find out how to do this so i tried adding a range selector option like below but i couldn't get that working either.
rangeSelector.ranges([{
'text': 'Testing',
'startDate': '2006 May 16 13:00:00',
'endDate': '2006 May 16 13:00:30'
}
If i use the range selector slider i can zoom as i require but how do i define this in code ?
So to recap i'd like
have the chart zoomed on load for a specific time range of type
start-stop in format of dd/MM/yyy mm:ss
have range selector button options for various time ranges of same format as above.
thank you.
Yes, you can define your own custom periods for rangeSelector, but if you want to zoom to specific period on load you have to call selectRange() method after chart drawing.
If you want to show only 30 seconds in the beginning of your series you should put the following line into your code:
chart.selectRange("second", 30, "first-date", true);
You can learn more about this method here
And find a similar example of using it here
I have an app that creates discrete bar charts. For some odd reason (which seems to be an internal error in the library), the y-axis scales to a data value which has the LOWEST number of integers in the value. For example, one data set has (1750, 1056, 1200, 850). The y-axis scales the maximum range to "850", even though the other numbers are all larger. I've tried using the forceY function, setting the maximum range value to the callback of the data value in my json, but it doesn't work. The problem only corrects itself if all of the numbers in the data set have the same number of integers in the value (i.e. all hundreds, thousands, etc). What is going on and is there a way to fix it??
For reference, here is my plnkr. Go to the "Top 5 SIC by Comments" report chart to see what I mean. The same problem occurs with the "Top 5 Topics by Comments" report chart as well. If anyone has any insight as to how to fix this problem, please let me know. Thank you ahead of time.
I've got a stacked bar graph that shows two categories of information. Now I have a requirement to show the total of the bars at the end of the bar. I've attached a mock-up showing what I'm trying to do -- the numbers in red are what I'm trying to add.
(source: michaelandlisa.us)
I couldn't find anything in the documentation on how to add totals, or on how to add annotations (which would also work).
Basically, ShieldUI jQuery chart plugin renders the series without text, as shown here.
To alter this behavior, you need to first enable the text.
Then, you can use a format function to either show some cumulative text, or return an empty string. More information on this approach is available here.
This can be coupled with a global counter to determine each Xth iteration.
I managed to get this to work by adding a Scatter chart of total values on top of the existing bar chart.
http://michaelandlisa.us/Images/Forums/stacked_with_totals_scatter.png
I also set the color on the series to "transparent" so the point wouldn't show up, and then I bumped the X and Y by 15 and 12 respectively. I also set the style to Bold, and set the format to "{point.y:n0}". Here's the relevant MVC code (where totals is a List of object):
.DataSeries(series => series.Scatter()
.Data(totals)
.CollectionAlias("Total")
.Color("transparent")
.AddToLegend(false).DataPointText(dtp =>
{
dtp.Enabled(true);
dtp.Format("{point.y:n0}");
dtp.Style(s => s.FontWeight(FontWeight.Bold));
dtp.Color("red");
dtp.X(15);
dtp.Y(12);
}))
I have a stacked bar chart with Days values displayed on the X Axis that needs to dynamically change it's size.
When I have a small number of points, let's say 2, the Interval value has a small value and instead of seeing only 2 labels on the axis, there are a lot many.
The ideal value would be Interval = 1 (with IntervalType="Days"). But this causes another problem: when the Interval is set like this, in case there are a lot of points and the size of the chart is small, the labels are all displayed because the Interval does not change.
Here are a few screenshots to illustrate the problem:
http://imgur.com/LEFEZjq,seYdvMJ,eVydRNB,Jwvu5s7
Interval left default and enough points (5/31 - 6/10):
http://imgur.com/LEFEZjq,seYdvMJ,eVydRNB,Jwvu5s7#0
Interval left default and small number of points (5/31 - 6/1):
...#1
Interval = 1 and small number of points (5/31 - 6/1):
...#2
Interval = 1 and large number of points (5/31 - 7/29):
...#3
My question is: Is there a way to have both? To set the Interval to 1 but still get rid of excess labels when the don't fit?
My idea was to have Interval be a maximum of 1 and the default calculated value, and I tried to implement it by changing it at the Rendered event, but this doesn't seem to work.
Nevermind.. I just went with a Numeric DataMapping instead of the DateTime one and mapped the AxisXLabel and ToolTipText to the date.
With dates it seems a little buggy but this way it works fine.