Installation

To install , run the following command

meteor add nodexpert:d3piechart

Usage

To use the package you can import using

import {PieChart} from "meteor/nodexpert:d3piechart"

Now, create a new object and then use the object's methods to create a D3 Pie Chart

Sample Data Format is provided below

1 const data = [
2                   {
3                      "type":"organic",
4                      "qty":45
5                   },
6                   {
7                      "type":"ads",
8                      "qty":30
9                   },
10                   {
11                      "type":"info",
12                      "qty":20
13                   },
14                   {
15                      "type":"maps",
16                      "qty":50
17                   },
18                   {
19                      "type":"images",
20                      "qty":10
21                   }
22                ]

const objPieChart = new PieChart(); // New object of the package objPieChart.setPieChartElement("#pie"); // Set the HTML Element selector in which the Pie chart will be rendered
objPieChart.setData(data); // Setting the JSON data according to which the PieChart Will Created objPieChart.createPieChart(); // Method which actually creates the D3 Pie Chart

Documentation

Methods

setPieChartElement(element)

This method is used to set the HTML element in which the Pie Chart will be rendered. This method can take Id as well as Class Element CSS selector.

objPieChart.setPieChartElement("#pie"); //setting an id selector as the HTML element objPieChart.setPieChartElement(".pie"); //setting an class selector as the HTML element
setData(data)

This method is used to the JSON data accroding to which the Pie Chart will be created.

objPieChart.setData(data); //Setting the JSON data
setHeight(height)

This method is used to set the height of the Pie Chart box.

objPieChart.setHeight(300); // Setting the height to 300px
setInnerRadius(innerRadius)

This method is used to set the Inner Radius for the Pie Chart to make it shape like a ring or a doughnut.

objPieChart.setInnerRadius(20); //Setting the inner radius to 20 px;
setAnimationDuration(duration)

This method is used to set the animation duration of Pie Chart creation animation.

objPieChart.setAnimationDuration(300); //Setting the animation duration in 300 ms
setStartColor(startColor)

This method is used to set the start color for the segments of the Pie chart.In other words this color will be used as a start color of the first segment with its shades for other segments.

objPieChart.setStartColor("#007AFF"); // Setting the start color to segment color range.
setEndColor(endColor)

This method is used to set the end color for the segments of the Pie Chart. In other words this color will be used as the end color uptill which the shades will be generated for the segments.

objPieChart.setEndColor("#FFF500"); //Setting the end color to segment color range.
setTitle(title)

This method is used to set the Title Text of the Pie chart.

objPieChart.setTitle("This is the title"); //Setting the heading of the Pie chart
setTitleColor(titleColor)

This method is used to set the color of the title text for the Pie chart.

objPieChart.setTitleColor("#00000"); // Setting the font color of the heading for the Pie chart
setTitleFontFamily(fontFamily)

This method is used to set the title's font family.

objPieChart.setTitleFontFamily("Helvatica"); //Setting the font family of the heading for the Pie chart
setTitleFontWeight(fontWeight)

This method is used to set the font weight of the title text for the Pie chart.

objPieChart.setTitleFontWeight("bold"); //Setting the font-weight of the heading for the Pie chart objPieChart.setTitleFontWeight(600); //Setting the font-weight of the heading for the Pie chart
setSegmentLabelFontFamily(fontFamily)

This method is used to set the Segment Label's font family.

objPieChart.setSegmentLabelFontFamily("Helvatica"); // Setting the segment's label font-family
setSegmentLabelFontSize(fontSize)

This method is used to set the Segment Label's font size.

objPieChart.setSegmentLabelFontSize(15); //Setting the segment's label font-size
setSegmentLabelFontColor(fontColor)

This method is used to set the Segment Label's font color.

objPieChart.setSegmentLabelFontColor("#337AB7"); // Setting the segment's label font-color
setSegmentPullOutLength(length)

This method is used to set the Segment Pullout animation lenght when cursor is hovered over a segment.

objPieChart.setSegmentPullOutLength(15); // Setting the pull out lenght for the animation
setSegmentPullOutDuration(duration)

This method is used to set the Segment Pullout animation duration in milliseconds.

objPieChart.setSegmentPullOutLength(300); // Setting the pull out animation of the segment duration.
setCustomColorFunction(customFunction)

This method is used to set a custom color logic for the segments of the D3 Pie Chart.If it is not set then by default logic in which the different colour shades between a start color and end color will be used.

objPieChart.setCustomColorFunction(function(d,i){

// d : Pie Chart segment object
```
// i : index of the object from the json data
```
return d.data.color;

/* if the all the json objects passed in the data have a color field then it will return that color. Example:- json_data = [{"result_type":"organic","qty":45,"color":"green"}, {"result_type":"ads","qty":30,"color":"red"}] then it will return green and red for the respective segment*/

----------------------------------OR---------------------------------------
You can also make your own logic like as follows:

const qty = d.data.qty;
if(qty == 10 )
return "red";
else if(qty==20)
return "#000000";
else
return "rgb(0,123,23)";
});
setTooltipPadding(padding)

This method is used to set the tooltip's padding.

objPieChart.setTooltipPadding(10); //Setting the padding of tooltip
setTooltipBackgroundColor(backgroundColor)

This method is used to set the tooltip's background color.

objPieChart.setTooltipBackgroundColor("#000000"); //Setting the background color of tooltip
setTooltipBorderRadius(borderRadius)

This method is used to set the tooltip's border radius.

objPieChart.setTooltipBorderRadius(10); //Setting the border radius of tooltip
setTooltipBoxShadow(borderShadow)

This method is used to set the tooltip's box shadow.

objPieChart.setTooltipBoxShadow("4px 4px 10px rgba(0,0,0,0.4)"); //Setting the border shadow of tooltip
setTooltipLabelFontSize(fontSize)

This method is used to set the font size of tooltip's label text.

objPieChart.setTooltipLabelFontSize("14px"); //Setting the font size of tooltip's label text
setTooltipLabelFontFamily(fontFamily)

This method is used to set the font family of tooltip's label text.

objPieChart.setTooltipLabelFontFamily("Helvatica"); //Setting the font family of tooltip's label text
setTooltipLabelFontWeight(fontWeight)

This method is used to set the font weight of tooltip's label text.

objPieChart.setTooltipLabelFontWeight("normal"); //Setting the font weight objPieChart.setTooltipLabelFontWeight("300"); //Setting the font weight
setTooltipLabelFontColor(fontColor)

This method is used to set the font color of tooltip's label text.

objPieChart.setTooltipLabelFontColor("#5CB85C"); //Setting the font color by using hex code
objPieChart.setTooltipLabelFontColor("blue"); //Setting the font color by using names