I'm in the process of building a donut chart that is rendered on the server. I got some help in the math around positioning the labels to the center of donut slice here. That solution works well but I'm having another problem with my chart. I don't know how to rotate each svg circle using my current math formula. I can rotate each slice using stroke-dashoffset but then the text isn't following the slice around the chart.
How can I rotate each slice of the donut chart so that they don't
overlap while still keeping the label in the center of the slice?
I think I need to adjust the angle, I'm just unsure how.
Here's what It currently looks like
Here's what I'd like it to look like
Here's the code sandbox I'm working out of https://codesandbox.io/s/goofy-feather-5yyr3.
Related
I am using d3 to achieve this chart.
First I thought it is an area chart but the ux said it is a customized / curved chart. So far I am stuck on using corner-radius which is not enough curved. The image is created from sketch then invision so there is no css available on the inspect mode.
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...
Highcharts is being used to create a windrose plot of correlation coefficient between one variable and many others. The default placement of the labels is such that they cannot be read near the top and bottom of the plot. I would like to rotate them such that they read like rays coming out of the center. Using the PlotOptions:rotate option, all labels rotate the same amount but I need each label to rotate by a slightly different angle. How can I achieve this? Thank you all for your kind help!
Is there a way to create a horizontal bar chart (or modify the row chat)?
The row chart does almost what I want, however I want the y axis to be a continuous variable and it seems the row chart defines the y axis in terms of discrete/ordinal variables.
I was also thinking about rotating the svg with d3. (Rotating the whole div worked, however the brush effect did not rotate too).
I was thinking:
dc.renderAll();
d3.select("body").select("#barChart3").select("svg").attr("transform", function(d) { return "rotate(90)"});
however that erased the whole chart rather than rotating it.
Any suggestions?
Update:
I am having some success with rotating the svg (the brush works), however the graph is being cut off and I can't figure out why...
The two charts are completely different codebases and have different features. The Y axis of a row chart does not even use a scale, so you are quite right that it can't be made continuous in its present form.
It is an eventual goal to merge them, but for now I think rotating is your best bet.
As for the clipping problem you're having, look for the clip-path attribute on the generated SVG. It would need to be rotated as well, but for a quick fix you can probably remove it.
How would you implement this with d3.js:
I started with sunburst diagram, but how to handle pics around circle? How to rotate them? etc. (assume each cheese has its png pic)
To add images, you can use the SVG image tag. The elements added in this way can be translated and rotated in the usual manner. The code you're going to need is essentially the same as for a pie chart with rotated labels, for which you should be able to find plenty of examples.
Here's a quick and dirty modified pie chart example that demonstrates the technique.