I'm trying to show a NoDataLabel custom component when there is no data that can be shown on the chart, when on recharts version 1.8.5 the y value on the Label list content props has a dynamic value that I can use to relatively place the no data custom bar on the chart however on the newer versions the y value is always undefined, therefore, the only fix I can think of currently is setting a constant value for it, which makes it hard to upgrade to the newer version if the bar chart is being used in the different views (in that case the y value always need to change to make sure the bar is placed correctly on the x-axis)
Reproduction link
Steps to reproduce
Try simply changing the recharts version from 1.8.5 to 2.3.2 in the package.json.
What is expected?
It's expected that the y value on the LabelList content props is not undefined but returns a dynamic value relative to the chart's y and x-axis so it always fits on the x axis.
What is actually happening?
Notice that the custom label component rendered in LabelList doesn't have an y value (it's undefined) in version 2.3.2. After setting the version back to 1.8.5 the noDataLabel chart appears as y gets a value.
Environment
Info
Recharts
v2.3.2
React
18.0.0
System
MacOs Monterey version 12.4
Browser
Chrome Version 109.0.5414.119 (Official Build) (arm64)
Related
In the application I'm working on I have a chart with two x axes. Both are of category type (but I think that's irrelevant) and all the series have to be attached to the first axis, so the second has no related data.
The problem is that depending on the width of the chart, the second axis labels are rendered or not. I want always to render them (because it is completely related to the first one). I have tried many things:
To apply linkedTo axis property on second axis. Not valid becuase the representation of the axis is wrong.
To assign a series to the second axis. Not valid because the representation of the data is not real and even if it comes with no data, we have the same problem with the axis.
I've been playing with chart margins with no success.
I have created an example in jsfiddle. There you can see how the second axis just renders its horizontal line. If you modify the css class highcharts-figure, by narrowing the element, for instance, setting a width of 800px and render again the chart, you can see the labels for both axes. That's my goal. But I want it for any size of the chart.
This example runs with Highcharts in v6.1.0 because is the version installed in my app, but this issue happens with the latest version as well.
Do you have any idea why is this happening?
This must be a bug? I found that removing width altogether from CSS allows it to render properly at all widths, but unfortunately the initial render is still wrong.
It seems like a bug to me also. Could you report it on Highcharts Github issue channel?
As a temporary workaround, you can do an update on this additonal xAxis and "force" chart to show this axis again. See demo.
chart: {
events: {
load(){
this.xAxis[1].update({
visible: true
})
}
}
},
API
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Axis#update
The bug is published in the highcharts github and there is another workaround for this issue.
Basically, it consists on assign to the second axis a fake series, as simple as:
{
showInLegend: false,
xAxis: 1
}
Here you have the full example: workaround.
(In my original post I said that I tried a similar solution -to add empty series to the second axis- and that it didn't worked for me. The most likely is that I was wrong, becuase I've tried this workaround and it's working fine.)
I am not able to put text like 15% or 16% in the graph. I s there any way to do it.
Since the chart generation has changed a lot from Chart 1.X (docs) to 2.X (docs), it all depend on the version you are currently using for your project :
Version 1.X
Not available for Doughnut charts
If you are working with Pie charts, it is built in in the data you are passing to the chart.
See this jsFiddle for more information and a full result.
Version 2.X
Two methods :
You can create a new chart type using .extend() method.
Then during the creation of the new type, you draw the percentage in the section.
Check this jsFiddle to see the result (better than the first version, IMHO).
You can force the tooltip to always be enabled (as asked in this other question).
You will just have to edit what is displayed in the tooltip to put the percentage instead of the value. And also move (edit X and Y positions) the tooltip to appear where it should be.
The image displays a Pie chart, but you can make it work for a Doughnut.
Is there any way to show the latest point on highcharts chart after using setData method? I always have to manually move it.
I found that zoomOut(); does it, but, obviously, it affects the zoom.
I have 16 series on the chart.
Clarification: I would like the chart to be in the same state after adding the new data point, as if it was always there. That is, moved maximum to the right.
When a new chart is created, latest point is always visible (you can scroll back to see older points, but you can always see the latest one) that is unless overriden of course.
I would fix this by adding a
chart.xAxis[0].setExtremes();
To the end of your updateData() function, which forces the axis to adjust to the new data.
Example:
http://jsfiddle.net/jlbriggs/eqnpLx6q/9/
I'm working on a project which involves having a pannable and zoomable d3.js graph. I've got it working mostly ok, however I've found a problem:
While testing on an iPad, I've found that some gestures can cause d3 to error -
TypeError: 'undefined' is not an object in the latest d3.js (not the .min version), line 1264 (which appears to be the start of function moved()...
It seems to occur when a zoom event starts partially outside the graph - e.g. one finger on the graph and one outside, then zoom. It may take a few tried in various places; I've not been able to find the exact one that triggers it.
I've copied the project and cut it down into a basic example, which is available at ---no longer available---.
Waterbug is installed, so when testing on an iPad (and possibly anything else that supports rotation) there is an error log console when rotated right.
Does this look like a bug in d3, or in my code?
Update
I've narrowed down the problem to a touch event which starts within the graph, but then extends outside. So, if you are panning the graph with one finger, then decide to zoom, but place the second finger outside of the graph, the error occurs. If the second finger is also within the graph, there is no issue.
Update 2
It appears the example at http://bl.ocks.org/mbostock/3892919 also suffers from the same isuse - see ---no longer available--- which is using the code provided, plus I've included Waterbug so rotating the device to the right (from vertical) will show the console.
The issue appears to be with the moved() function - line 1264 in v3.2.8 and line 1387 in v3.3.2.
Turns out it was a bug in d3 - see https://github.com/mbostock/d3/issues/1497 for details
I am using HighCharts to produce some graphs.
For some reason the graph axis do not start at 00:00 (which is the earliest data point in this case) but instead start from 23:00, which seems odd.
I have tried setting the pointStart option to the earliest data point but this doesn't help either. I set the property like so:
options.plotOptions.series.pointStart = time;
Here is an image showing the issue:
I figured it out, I had the startOnTick property set which, according to the documentation, may result in padding at the start. I removed this property and it all works nicely now.