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.
Related
I am looking to merge bar chart and line chart in the same responsive container in recharts, in a way that they overlay each other. It is possible?
You need Composed Chart from their API and you can decide what chart can overlay another by placing it higher or lower in your code.
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.
Im showing identical data in two different charts:
But for some reason all bar charts show different time series for the graph. It should start from Mar.25 and end Apr.9
You might try looking at the style tab for the charts and selecting the correct range setting on the x axis.
I am displaying several time series lines along with Markers on a JFreeChart plot. Different markers are related to different time series and I would like them to appear in the same colour. So how do I find out for a given TimeSeries what is colour is?
You should be able to use lookupSeriesPaint() for a given series. See also this example that overrides getItemPaint(), which calls lookupSeriesPaint().