I am using Highcharts to display a doughnut chart. The chart has dataLabels set up on it.
When the slice of the chart has a midpoint near the top or bottom of the chart, the dataLabel gets put above or below the chart image itself. When the chart renders, this causes the height of the chart to shrink, which is undesirable. What makes the shrinking even worse is the size of the doughnut "hole" is calculated from the height of the chart container and not the chart drawing, so it remains the same, which makes the chart itself very skinny.
Is there a way to prevent the labels from going above or below the chart and keep them from squishing the chart? Or a way I could add that functionality in via a certain event handler or something?
Thanks!
Related
I have a chart created with ChartJS that displays datasets ( (x,y) pairs) in a line chart. Based on user requests, I am adding the ability for the user to change the X-max and Y-max values. All well and good until the datasets overflow the Chart area.
This is off the right side of the chart, in the blank space under the legend. As you can see, the lines stop following the points and go crazy until they are clipped by the canvas area.
I would like to clip or mask the visible data using the Chart area, rather than the Canvas area. Is there a setting in ChartJS to do this?
Edit: clarified title
I've found a partial solution. By adding lineTension: 0 to the Chart.dataset object, I was able to get the following:
Changing the line tension to 0 has eliminated the wavy lines outside of the chart area, but I'm still looking for a solution to the data overflow.
Our UI uses D3 and when applying splines to smooth the data we have several cropping or out of bounds issues as follows:
Spline is cropped at top of graph
Spline goes below x-axis
Any advice would be appreciated.
Use .getBoundingClientRect() on each of the set of paths to get the extreme top and bottom bounds, then adjust the axis range or the visible margins of the chart accordingly
I am using kendo ui to render some pie charts to my web page. They have a variable data set, some will have a legend which is 1 row and some will be 2 rows.
When I have the position set to bottom the pie chart with two rows of legend ends up being smaller because its trying to fit the second row in the same area, so it forces the pie chart to be smaller. The legend is displaying how I would like it to display though, with the items being center aligned.
I've tried to get around this by setting the legend position to custom instead of bottom. This takes the legend out of the sizing equation and positions it absolutely. This means that the pie chart sizes are now all the same, but the legend data is now left aligned instead of centered. This makes the legend with only 2 items look bad since its now all off to the left instead of centered.
Does anyone know if there's a way to set the legend to be center aligned while i have it set to using a custom position?
From what I can see in the API documentation, there is no option. Also, because the labels will be of variable lengths, i can't conditionally statically position them because depending on the label length different amounts may fit on each row.
I have setup a JS Bin example showing the issue:
http://jsbin.com/fejeyi/5/
The first two charts are using position bottom and you can see the pie's are different sizes, but the legend displays correctly.
The second two charts are using position custom and you can see the pies are the same size, but the legend is left aligned.
Any help appreciated.
Here's the source of the JS Bin:
http://jsbin.com/fejeyi/5/watch?html,js,output
Cheers!
So I'm making a pie chart, and I am attempting to recreate this
However, I can barely position my text labels to not get obscured by the pie slices. Here is my jsFiddle
Setting the z-index for the text attribute in the above fiddle doesn't inhibit it from being obscured.
In addition, how can I assure that the labels are outside the pie chart? I tried setting an offset from the center on the labels, but then they are obscured by the edges of the svg.
Any input would be awesome.
I have to implement candlestick stick graph through Highchart but since Highchart doesn't support candlestick graphs that's why I am trying to implement this through box plot chart in Highchart. For this I am doing this by setting the median to null.
But the issue is that How can I reduce the width of box and also I have to remove horizontal line shows on low point and high point of box plot. Can any body suggest me to do this
You can set pointWidth to make smaller width, but there is no option to remove vertical lines on how and low point, see: http://jsfiddle.net/mTdPh/