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
Related
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/
I was trying to use dimplejs draw a multi-line chart. But the default line marker looks kinda too "big" for my chart. Is there a way to change the size or the color of the linemarker in dimplejs?
After drawing you can modify the shapes:
// dimple's draw method will create the shapes in the svg
chart.draw();
// this will select the markers and set the radius to 2
svg.selectAll(".dimple-marker,.dimple-marker-back").attr("r", 2);
I am using highchairs 3.0 to create a graph that has N Boxes on it. So far so good. However, one of the user desires is to draw a few plotLines (based on values on the Yaxis) for each Box on the graph. The catch is that the information is different for each of the boxes, so they want the plotLine to just extend from the start of the box on the left side (x-axis basis) to the right of the single box.
Highchairs by default draws the y-axis plotLines (and plotBands, looked at those too) all the way from left to right, causing a very chaotic chart indeed!
Is there a way to limit the length (start / end on the x-axis I guess) of a plotLine in a box plot to just the width of the box?? I guess I basically want to overlay lines onto the area of each Box on the graph.
Thanks!
The best way that I have found to do this is by extending the marker symbol types to create a horizontal line.
Use this as the marker symbol type for a scatter series to accomplish what you're looking for.
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
return ['M',x ,y + height / 2,'L',x+width,y + width / 2];
};
Example:
http://jsfiddle.net/jlbriggs/m85yv3aq/
Required inputs of: radius, lineWidth, color
((also a useful way to build bullet charts:
http://jsfiddle.net/jlbriggs/UGs2E/
))
I am trying to have my own y axis labels for the bubble chart in nvd3. Currently the labels are [1,2,3,4,5]. I want them to be displayed as [2,4,8,16,32]. I found the following function,
chart.yAxis.tickValues(['2','4','8','16','32']);
But the labels are not being changed here. I am unable to understand why.
These tick values will not have any effect if the y values themselves are not within the 2-32 range. Right now that chart only has y values up to 2+.
So, if in addition to adding chart.yAxis.tickValues(['2','4','8','16','32']); to the Chart Code/Javascript tab as you have in your question, you also make the following change to the code in the Data(JSON) tab...
y: Math.floor(Math.random() * 33) // change from y: random()
...then you will see the tick values you specified (2-32) show up in the y axis.
NOTE: I assume you are looking at the Scatter / Bubble Chart.
I have a pie chart which is drawn in HTML5 canvas .. I am retrieving the Point (X,Y) on mouse over .. Now i want to know whether the Point (X,Y) is in which slice of the pie chart ..
Note :
I have already found whether the Point(X,Y) is inside the pie chart or not
Known values :
Center of Pie Chart (Cx,Cy)
Start and End angle of each arc or slice
Piechart radius (R)
Start and End points of the arc or slice
So, we know the angle where a slice starts. We know the center and point (x,y).
Let's assume the origin is (0,0) and we draw a line from there to point (x,y) . The angle between the x-axis and the line will be tan^-1(y/x).
Once we know the angle it's a simple calculation to see between which arc section it lies, since we know the start and ending angles of each slice.
If the origin is not (0,0) you can make it so with some simple math.