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.
Related
I'm making a bar chart using recharts and I can't find a solution to what the designer thought. He wants all the labels in the same position, at the bottom of the bars.
Here the image: https://ibb.co/sWfqTbP
Does anybody knows how to make it? The documentation is lacking a bit.
Is there any way I can make a Lightview histogram chart with multiple values per data point, so that it looks like a Highchart stacked bar (https://www.highcharts.com/demo/bar-stacked)?
If not, is there a workaround?
I already overlay-ed two separate histograms, but that does not help, because both start at the bottom and depending on the values some points are hidden.
Unfortunately it's not possible to draw vertical histogram at the moment.
I'm using ChartJS to display multiple charts on a page.
Each chart has a different dataset, and different labels (some have short labels, some have long labels).
Currently the width of the actual 'data-part' (the part of the chart showing e.g. Bars) depends on how much space the labels take. I would like to make all charts have a fixed size for the data-part, and let the labels take up the remaining size.
See for example the following screenshot. Here I display 2 charts, but the actual data-part is different for both, because one has shorter labels than the other.
What I would like is to set for example a fixed width of 400px for the data-part, and let the labels take the remaining space left on the page. That way the charts would be aligned perfectly above each other.
Even better would be if I could set that for each chart the data-part takes a percentage of the width (e.g. 70%), so the labels take the rest (30%).
I have checked the ChartJS documentation, but the only I can find it setting the width for the entire chart-component.
Cheeky solution - you can add a dummy chart before your charts having the same labels.
Let's call this dummy chart as chart D and your main chart as chart M.
In M, you would fix it's width and hide the labels by writing in options -
scales: {y: {ticks: {display: false}}}
Now you have a fixed data width.
In D, you would just display the labels and hide the data part (hiding grid lines, legend, title, etc.).
So now you have two charts side-by-side, one is displaying just the labels and the other displaying the bars, just need to position it in such a way that no matter how long the label is, it does not overlap with M. Repeat the step similarly for all charts and have the same width for M1,M2,M3,...
This is a solution that seemed to work for me.
How can I change the thickness of two doughnut charts if one is nested inside the other.
Example: https://codesandbox.io/s/doughnut-chart-percentage-kqoi1?file=/src/App.tsx
I want to look it like this:
I've tried with the options 'cutout' and 'weight' and it works if I would have only one chart, but I can't change both to the same thickness.
I want to have both doughnuts as thin as in the picture.
You can define cutout: '90%' on both datasets.
cutout: The portion of the chart that is cut out of the middle. If string and ending with '%', percentage of the chart radius. number is considered to be pixels.
Please take a look on your amended Sandbox
Not sure why but I have to press the refresh button inside the Sandbox in order to have the chart drawn correctly. I guess, Sandbox is somehow remembering your original code after I forked it.
I hope this is not a "big ask" but I'm stuck. I asked this issue on github issues#1334 but I have not got any responsive from the maintainers of the project. Hopefully I can get help here.
Overview
My issue is that I'm trying to adjust the variable width slider (from react-slick documentation) in order to be:
finite
responsive (to different viewports) (if possible to display as many slides according to viewport width)
scroll only 100% visible slides
slides should fill the div display area
Observations
So far, I have managed to make it:
finite
Regarding responsive, breakpoints don't work well for variable width slides.
scroll only 100% visible slides, This is very important when it comes to variable viewport width and when using variable width slides.
slides should fill thedivdisplay area, finite variable width slides when they reach the last slide, even though it was already visible by the previous scroll, the user can still scroll and what is visible is a huge area of blank slides, for example:
The Code
The issue can be replicated and tested in code sandbox
...
...
Any help is welcome.