Close Menu

piecharts

Introduction

Welcome to the official documentation page for PieCharts. This documentation will provide you with detailed information and instructions on how to utilize the PieCharts library effectively. PieCharts is a powerful charting library for creating visually appealing and interactive pie charts using HTML5 and JavaScript.

Installation

To install PieCharts, you need to follow these steps:

  1. Download the PieCharts library from the official website (https://www.piecharts.com/downloads).
  2. Unzip the downloaded file to your desired location.
  3. Copy the piecharts.min.js file to your project’s JavaScript directory.
  4. Add the following script tag to your HTML file:
    <script src="path/to/your/js/directory/piecharts.min.js"></script>
    Make sure to replace path/to/your/js/directory with the actual path to your JavaScript directory.

Getting Started

Follow the steps below to get started with PieCharts:

  1. Create a new HTML file or open an existing one in your preferred code editor.
  2. Include the PieCharts library as mentioned in the installation steps.
  3. Add a container element to hold your pie chart:
    <div id="piechart-container"></div>
  4. Create a script tag and initialize the pie chart: 
    // Create a new PieChart
const pieChart = new PieChart("#piechart-container");

// Set chart data
const data = [
  { label: "Label 1", value: 30 },
  { label: "Label 2", value: 20 },
  { label: "Label 3", value: 50 }
];
pieChart.setData(data);

// Render the chart
pieChart.render();

Documentation Sections

Chart Data

PieCharts requires an array of data objects to render the chart. Each data object must have two properties: label and value.

const data = [
  { label: "Label 1", value: 30 },
  { label: "Label 2", value: 20 },
  { label: "Label 3", value: 50 }
];
pieChart.setData(data);

Customizing the Chart

PieCharts provides several options to customize the appearance and behavior of your chart. You can modify various aspects such as color scheme, animation, tooltip, etc. Refer to the options below:

// Set chart options
const options = {
  colors: ["#ff0000", "#00ff00", "#0000ff"],
  animation: true,
  tooltip: true
};
pieChart.setOptions(options);

// Render the chart
pieChart.render();

Updating the Chart

You can update the chart dynamically by changing its data or options and then rendering it again. Use the following methods to update the chart:

  • Updating data: 
    const newData = [
  { label: "Label 1", value: 25 },
  { label: "Label 2", value: 35 },
  { label: "Label 3", value: 40 }
];
pieChart.setData(newData);
  • Updating options: 
    const newOptions = {
  colors: ["#ff0000", "#00ff00", "#0000ff"],
  animation: false,
  tooltip: false
};
pieChart.setOptions(newOptions);

Events

PieCharts provides event handlers to help you respond to various interactions with the chart. You can attach event listeners to execute custom code when specific events occur. The supported events are:

  • select: Triggered when a slice of the pie chart is selected.
  • deselect: Triggered when a selected slice of the pie chart is deselected.
  • hover: Triggered when the mouse pointer hovers over a slice of the pie chart.
// Add event listeners
pieChart.on("select", (slice) => {
  console.log("Selected", slice.label);
});

pieChart.on("deselect", (slice) => {
  console.log("Deselected", slice.label);
});

pieChart.on("hover", (slice) => {
  console.log("Hovered", slice.label);
});

Conclusion

Congratulations! You’ve successfully learned how to integrate and utilize PieCharts in your web projects. Take advantage of the powerful features and customization options to create stunning pie charts that convey information effectively.

If you need further assistance or have any inquiries, please don’t hesitate to reach out to our support team at support@piecharts.com. Happy charting!