I am using chartJS library for one of my projects and I need to draw a doughnut chart. The doughnut chart needs to be a half circle and the sections in it needs to have rounded edges, something like shown below
I could achieve the same for a full circle by referencing this great answer as shown in the codepen below
Full circle with rounded edges codepen here
But if I change the options to draw a half circle with following options
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
then the calculations seems to go wrong somewhere and the arc circles are placed randomly as shown below
Problem Code pen here
How can i fix this. Please help. I am stuck. Thanks
You should change y translation by factor of 2:
ctx.translate(arc.round.x, arc.round.y*2);
http://jsfiddle.net/alonas/kx6rjy07/
Related
current doughnut graph look,
doughnut chart first image
in the above graph, the floating circle is not aligned properly in line.
expected how the graph should be,doughnut chart second image
in the second image, the floating circle is properly set in line. how can I achieve that?
bleow is code example ->
https://codesandbox.io/s/nameless-sunset-y494et?file=/index.html
thanks.
Well you just have to add the thickness of the circle to your calculation, in the afterDraw function and than it should work
...
ctx.arc(
(arc.round.radius + arc.round.thickness) * Math.sin(endAngle),
(arc.round.radius + arc.round.thickness) * Math.cos(endAngle),
arc.round.thickness,
0,
2 * Math.PI
);
...
Here is the link to to the forked codesandbox
If one examines this block:
https://bl.ocks.org/mbostock/8d2112a115ad95f4a6848001389182fb
The gridlines are in increments of 20. However the radius of each gridline does not appear to be equal as it scales up:
I'm guessing there is some geometric justification for this, but that's not what I'm after for my chart. I only want aesthetics, I need the gridline circles to be equidistant from each other.
Question
Using Bostock's radial scale script as seen in the above block, is there any way to adjust the scaling of the radii? I want the scaling to be equidistant.
The only thing you need is to change this...
var y = d3.scaleRadial()
... for this:
var y = d3.scaleLinear()
Here is the bl.ocks with that change only: https://bl.ocks.org/GerardoFurtado/0a0b22d15c4e715e4c748335e37330fb/1670bbcdfdcbed6b6a0ae2a56d5f153570d969d1
PS: There is indeed a geometrical explanation for this: a circle with radius 2r has an area four times bigger than a circle with a radius r. That's why we always (at least in truthful charts) scale the circle's radius to the square root of the encoded datum. Well, you mentioned that "I only want aesthetics". As a data visualisation specialist/enthusiast who happens to be a D3 programmer, not the other way around, I suggest you reconsider your approach and keep the radial scale. Charts that prioritise aesthetics over information are normally bad charts, and charts that impose aesthetics ignoring information are simply untruthful charts.
I have a half-donut pie chart using a 100-point series in Highcharts. Please see screenshot.
I've spent the last four or five hours trying to figure out why there's a line between each pie slice. It's not a border, because if I change the background color behind the chart to black, I can actually see the black between each pie piece. So there's a 1-pixel gap between each pie piece. I would like the chart just to be a solid color, not have a 1-pixel gap between each pie piece. Pulling my hair out trying to figure out where this setting is. Any help much appreciated.
I was finally able to fix the issue by reading about series.borderWidth. (Thanks to #BarbaraLaird.) This is from the Highcharts API docs:
borderWidth: Number The width of the border surrounding each slice.
When setting the border width to 0, there may be small gaps between
the slices due to SVG antialiasing artefacts. To work around this,
keep the border width at 0.5 or 1, but set the borderColor to null
instead.
Defaults to 1.
I was able to fix the issue by setting borderWidth to 1 and setting borderColor to null. (My borderWidth was previously set to 0 and borderColor was undefined.) That filled in the "gaps" between the antialised slices.
How can I create a triangle with rounded corners in EaselJS? I'm using drawPolyStar to create the triangle,
var polystar = new createjs.Shape();
polystar.graphics.drawPolyStar(100, 100, 60, 3, 0, -90);
This is an image of what I want the triangle to look like:
EDIT: Image link doesn't seem to work. This is what the triangle should look like :
But actual triangle has sharp corners.
There are no canvas APIs for rounding corners of polygons that works like the roundRect API.
There are a few approaches I can think of:
Do the round corners yourself using arcTo. This would take some math to figure out, and there may even be some libraries or examples floating around.
[EDIT] I spent a little time making a sample https://jsfiddle.net/lannymcnie/cga60tsf/1/
Using rounded stroke edges, you can sort of fake it. This fiddle shows how a thick line with round ends can make the outer edges look round. You could draw another smaller triangle on top to give the desired effect.
Sample
// Line outer radius
context.lineJoin = "round";
context.lineWidth = cornerRadius;
I am trying to smoothen the transition from a diagonal line to a horizontal line by using arcs of circles that I calculate with a little calculus. The problem I am running into is that it seems as though I can't get the arcs to be positioned correctly.
For example: jsfiddle.net/5Wa9e/2
It might just be a problem with my calculations but from "inspection" it seems as though I have the right circles. I want the red points on the right to always be at the bottom of the circle at the point where the tangent is horizontal.
I am using: A#{radius},#{radius} 0 0 0 #{curveEndX},#{curveEndY}" to define the arc. Am I missing something?
--edit--
It was just my math. Turns out the arcs I see are just fallback mechanisms for when the SVG renderer can't find a circle matching my constraints.
--edit--
end result: jsfiddle.net/5Wa9e/2