I have an Area chart in Victory where the x-axis has dates.
I want to customize the x-axis Label and have created a CustomLabel component to calculate the x-axis scale and display "LABEL" below the ticks.
But for some reason, the scale is not calculated correctly for the Date Object.
Please let me know what I am doing wrong here.
Code here - https://codesandbox.io/s/3203z3n7r6
For anyone who may face this issue, I raised the issue in their Github Page and one of the authors has given a fix for it. Please see below:
https://github.com/FormidableLabs/victory/issues/1075
Related
I'm using highcharts-react-official for a histogram with typescript. The problem I'm facing is, when user zooms in the values on the extreme of x-axis disappear (highlighted relevant x-axis values).
highchart
The zoom configurations that I'm using in Highcharts are something like this:
zoom on x-axis only
I did go through Highcharts documentation and some articles as well, but couldn't find any solution. If you have any previous experience in Highcharts then I'm sure you would be able to assist me here.
You are looking for cropThreshold property. From Highcharts API:
cropThreshold: number
When the series contains less points than the crop threshold, all
points are drawn, event if the points fall outside the visible plot
area at the current zoom. The advantage of drawing all points
(including markers and columns), is that animation is performed on
updates. On the other hand, when the series contains more points than
the crop threshold, the series data is cropped to only contain points
that fall within the plot area. The advantage of cropping away
invisible points is to increase performance on large series.
Defaults to 50.
You can increase the value:
plotOptions: {
series: {
cropThreshold: 9e9
}
}
Live demo: https://jsfiddle.net/BlackLabel/w6y4zdk8/
API Reference: https://api.highcharts.com/highcharts/series.column.cropThreshold
Here is the recharts - Bar chart sample I have tried. https://codesandbox.io/s/simple-bar-chart-forked-8tu41b?file=/src/App.tsx
When width is lesser, Yaxis label is not started from the first, it seems to be cutoff like below. Example full email is "longnametestuser#testdomain.com" but it is starting from "user#testdomain.com". (Note: Even if we add tickFormatter to add ellipse after certain characters in label, it is not aligning unless we give proper width meaning it is cut off at the start. I could not understand it. Please help me to understand and align it.)
And when viewing the chart in the Large and Small mobile screens, chart bars are overriding the labels like this,
I have wrapped the chart inside the responsive container still chart bars and labels are not fitting properly. Any suggestions for this problem would be very helpful.
Thank you in advance.
I have a Google Data Studio pie chart showing the % of the Record Count metric, for various slices, but on hover, the tooltip shows the absolute number of Record Count. I don't want to share the absolute numbers with the customer receiving this report. How can I hide that?
Unfortunately it seems not possible as of now, here is the same question in the official support forum.
As stated by a user, the only possible workaround is to add a trasparent square over the chart, this would prevent the hover functionality to work.
Define your metric used in the pie chart as a percentage by setting the Comparison Calculation field to "percent of total". When hovering the mouse, something in the format 10%(10%) will be displayed on the card. Thus, the absolute value does not appear, even if the percentage is doubled.
I was using recharts to plot graphs in my react app. I wanted to achieve something like the picture below shows:
The only problem is that, I want the reference line to end at the point where green and blue lines in the picture, intersect. I just can't figure out how to stop the x-axis reference line to stop over-shooting about a certain y-axis value. Also, if there is a possibility to achieve the same with some other reacharts component, please do let me know.
I am trying to load dataset during initialization of the JFreeChart. But every time I tried to create a dataset with higher "number of item per series", the more data (all data) displayed visible in the chart (the bigger the dataset, the smaller the graph). But actually what I wanted is to have the fixed range of dataset values displayed on the chart while the rest is still hidden. Just the same way the data would normally be displayed in the actual trading platform, let's say Metatrader (MT4). First time when I open the chart I can see the screen filled with the only visible dataset of the chart and if I left-scroll the chart I will be able to see the old/history dataset as well. Does anyone have idea how to achieve this using JFreechart?
Really appreciate for any help or any thing/articles I can refer. Thanks so much!
You can use setRange() on either the domain or range axis, as shown in this fragment. If you've already tried this, it may help to edit your question to include an sscce and/or image that exhibits any problems you encountered.