Develop Reference

kendo chart category axis item labels - Set highlighted labels has wrong alignment

I'm using kendo chart to render out the charts and I want specific labels to be displayed as a bold text, So for that I'm using visual method which help me customize label and render with createVisual()
When I add bold property to label it is not getting aligned as compared to normal label.
code:
const { x, y } = e.rect.origin;
const text = new Text(
e.text,
new Point(x, y),
{ font: 'bold 12px "Source Sans Pro",sans-serif' }
);
const group = new Group();
group.append(text);
return group;
If I remove bold property then it is working as expected.
Thanks in advance.

Thanks for the help guys.
Finally I got the solution here it is.
When I was rendering chart Souce Sans Pro font was not getting loaded before kendo render chart so it was using font fall back logic and calculating axis based on that another fonts.
I added font pre loading logic at the index level and now it is working as expected.
This might help others. :)

Pie Chart Slice without white border in c3 js

I am using C3 js for plottin Pie Chart. I am able to plot it successfully. I am trying to customize the Pie with respect to the slice. I need to plot the Pie chart without the White border for all the slices. I am not sure how to do this in c3 js. It would be of great help if anyone can let me know how to plot pie chart without the white border.
Thanks and Regards,
Saravanan

you can change color using this css i have changed to gray color you can change as per your requirement
.c3-chart-arc path {
stroke: #666;
}

SVG/JavaScript pie chart with outside labels constrained by container width

All examples of pie charts (with outside labels and lines) use labels positioned around the circle (diagram A below). The problem is that a container where my pie chart should be located has a width constrain equal to the width of the pie chart.
1) Is it possible to position the labels like on diagram B below?
2) Is there any other solution addressing my problem?
NB! The labels cannot be placed inside the circle. I am happy to use any JavaScript library to achieve the required result.

Please go to http://jsfiddle.net/thudfactor/HdwTH/ and do a view source in the pie chart area (please give credit to this author). Paste the source into your IDE.
Make these modifications:
// Store our chart dimensions
cDim = {
height: 300, //500
width: 300,//500
innerRadius: 50,
outerRadius: 150,
labelRadius: 150 //175
}
This uses the d3.js library

d3 legend (text + line representation)

I am a newbie to d3js and I am currently plotting some multiple line chart graphs. One thing I want to do is to add a legend for each line. I figured out that I can add some text and I can also give the text some color, which is same as the line's color. However, I would like to add some line representation in front of the text. For example,
Legend in Multi line chart - d3
as we can see here, the legend starts with a colored rectangle + text, and I want it a line (dashed line for example) rather than rectangle in front of the text.
Is there anyone can help me with this? Thanks a lot!

How to create a gradient fill on the inner edge of an object with Raphael?

I have a dynamically generated graph that illustrates the range of items that will fit within a container, relative to the item's width and thickness. I'm trying to show that the items near the edge of the "fit range" might not be as good of a fit as those closer to the middle of the graph. To do this I'd like to fill my shape with green, which has a gradient that turns to yellow around the edges. This yellow area should be of uniform thickness around the entire inside edge, as illustrated in the image below. How might I accomplish this with Raphael? I know how to do a solid fill; the gradient is where I'm having difficulty. Thanks in advance for your help!

In theory it should be possible to do this by slicing the graph into four triangles.
Each triangle can then be filled with a gradient that is mostly your solid color but at one end it turns into your edge color. By setting the right angle on the gradient you can make it look like only the edges on the graph have a different color.
I've created the rectangle above using the following code.
var slice1 = paper.path("M200 200L100 100L300 100").attr({
"fill": "90-#0f0:70-#ff0:95",
});
var slice2 = paper.path("M200 200L300 100L300 300").attr({
"fill": "0-#0f0:70-#ff0:95",
});
var slice3 = paper.path("M200 200L300 300L100 300").attr({
"fill": "270-#0f0:70-#ff0:95",
});
var slice4 = paper.path("M200 200L100 300L100 100").attr({
"fill": "180-#0f0:70-#ff0:95",
});
Your case will be a bit more complex though. You will have to first find the middle of the graph to be able to slice it into triangles. Then you need to find the angle for each of the gradients.

Evening,
It's not as easy as it looks like it should be. Probably due to an issue with how to implement it in VML.
The best I was able to do is to use a slightly larger clone of your target object behind the original, and then use a gradient fill on it.
I've made an example in this fiddle
Hope that helps.

You could use a radial gradient on an overllying ellipse but that will leave a rather large corner of yellow
To find the centre of your object use good old getBBox()