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.
Related
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 tasked with creating a special graphic(see attachment) #work. I have managed to create this using highcharts [ pie ] but the problem is the positioning of the data-labels. I need the labels to be inside the slice and vertically aligned according to the slice angle on the pie.
Is it possible to do this with highcharts?
The second (bigger graphic) is what I have managed to create so far with highcharts and I am struggling to position the labels as shown on the smaller graphic.
Please help...
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!
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!
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/