I am unable to fix the donut size in c3js. Whenever the no of labels int the legend and the length of the labels increase, I need to increase the chart size to accommodate them. But this affects other charts with less no of labels in the legend. To be consistent, I use the same chart size for all the donut charts I show in the page. But the size of donuts are all different according to the legend labels and it does not look good. Any suggestion on how to fix the donut size regardless of the legend labels. I am using padding to place the legend on the right of the chart.
Below you can find the code to generate the chart :
<c3chart bindto-id={{id}} chart-data="piePoints" chart-columns="pieColumns" padding-left="0" padding-right="300" padding-top="0" padding-bottom="0">
<chart-size chart-width="400" chart-height="300" />
<chart-donut width="40" expand="false" show-label="true"></chart-donut>
<chart-legend show-legend="true" legend-position="right" />
<chart-tooltip show-tooltip="false"/>
</c3chart>
In the fiddle below, I have 3 charts generated by c3js. I want to fix the size of the chart but it can be seen that the donut size varies according to the legend.
https://jsfiddle.net/anu23/qzew784d/2/
Is there way to keep the donut size fixed regardless of the legend label length and the no of labels in the legend.
Related
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'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 do i close the padding between chart title and the chart. See image attached
I would suggest placing the chart into a BoxLayout.Y_AXIS instead of what I assume is the center of a BorderLayout. The center of the BorderLayout stretches to take up available space and the chart aligns to the center. The box layout will give the chart the full width and its preferred height.
I make Chart Report using SSRS
I have problem is my long series label not show whole text For Example
if label is "Personal Computer" it's show "Personal C......"
see image below
and this is whole Chart area
it's have more space between legend and series label I want to use this space to show whole text like this
How to fix this problem ?
Thank you.
Kindly Add the Legend on Right side of the Bar chart and Check
You need to fix the Chart Area height so that it is approximately half the height of the chart. This then allows sufficient space for the x axis labels.
You also nee to set the minimum and maximum font sizes for the x-axis.
I suggest between 6 and 8 pt.
Try setting the label rotation to 90 degrees instead of 45 also make sure the x axis interval is set to 1 and not auto.
[ Also have a look at this article ]
(http://www.douglane.net/fit-chart-labels-in-ssrs/)
I want to increase the width of pie chart by reducing the gap between the chart border and chart. How to achieve this?
The setInteriorGap() method "controls the space between the edges of the pie plot and the plot area itself." Smaller values reduce the gap.