Highcharts Basic Pie Chart

To create a basic pie chart using Highcharts, you can follow these steps:

Include the Highcharts library in your HTML file. You can either download it from the Highcharts website or include it from a CDN like this:

<script src="https://code.highcharts.com/highcharts.js"></script>

Create a container element for the chart in your HTML file, like this:

<div id="chart-container"></div>

In your JavaScript code, define the data for the chart in an array of objects. Each object should have a 'name' and a 'y' property, like this:

var data = [
  { name: 'Apples', y: 5 },
  { name: 'Oranges', y: 3 },
  { name: 'Bananas', y: 4 },
  { name: 'Pears', y: 7 },
  { name: 'Grapes', y: 2 }
];

Create a Highcharts chart object and configure it with the data and chart options. In this case, we want a pie chart, so we'll set the chart type to 'pie', and we'll use the 'data' option to specify the data for the chart, like this:

Highcharts.chart('chart-container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Basic Pie Chart'
  },
  series: [{
    name: 'Data',
    data: data
  }]
});

Note that we're using the 'data' option to specify the data for the chart.

Finally, add some CSS to style the chart container and make it responsive, like this:

#chart-container {
  width: 100%;
  height: 500px;
  max-width: 800px;
  margin: 0 auto;
}

This will create a basic pie chart using the specified data and options, and render it in the 'chart-container' element on your web page. You can customize the chart further by adjusting the options and adding additional features, like tooltips, legends, and labels.

Customizing appearance in Highcharts Basic Pie Chart:

Customize the appearance by modifying various chart options such as colors, border styles, and starting angle.

Highcharts.chart('container', {
    chart: {
        type: 'pie',
        backgroundColor: '#f2f2f2',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f}%'
            }
        }
    },
    series: [{
        data: [{
            name: 'Category 1',
            y: 45.0
        }, {
            name: 'Category 2',
            y: 26.8
        }, {
            name: 'Category 3',
            y: 12.8
        }]
    }],
    // Other configuration options...
});

Adding data to Highcharts Basic Pie Chart:

Add data for each slice within the series array to create a Basic Pie Chart.

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f}%'
            }
        }
    },
    series: [{
        data: [{
            name: 'Category 1',
            y: 45.0
        }, {
            name: 'Category 2',
            y: 26.8
        }, {
            name: 'Category 3',
            y: 12.8
        }]
    }],
    // Other configuration options...
});

Nested Basic Pie Chart in Highcharts:

Create a nested Basic Pie Chart by incorporating multiple series with hierarchical data.

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f}%'
            }
        }
    },
    series: [{
        name: 'Category 1',
        data: [{
            name: 'Subcategory 1.1',
            y: 25.0
        }, {
            name: 'Subcategory 1.2',
            y: 20.0
        }]
    }, {
        name: 'Category 2',
        data: [{
            name: 'Subcategory 2.1',
            y: 15.0
        }, {
            name: 'Subcategory 2.2',
            y: 10.0
        }]
    }],
    // Other configuration options...
});

Exploded Basic Pie Chart using Highcharts:

Separate slices in the Pie Chart by exploding specific segments.

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f}%'
            },
            slicedOffset: 10 // Explode slices by a specified offset
        }
    },
    series: [{
        data: [{
            name: 'Category 1',
            y: 45.0,
            sliced: true
        }, {
            name: 'Category 2',
            y: 26.8
        }, {
            name: 'Category 3',
            y: 12.8
        }]
    }],
    // Other configuration options...
});

Interactive features in Highcharts Basic Pie Chart:

Enable interactive features like tooltips, data labels, and events for a richer user experience.

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f}%'
            }
        }
    },
    series: [{
        data: [{
            name: 'Category 1',
            y: 45.0
        }, {
            name: 'Category 2',
            y: 26.8
        }, {
            name: 'Category 3',
            y: 12.8
        }]
    }],
    // Other configuration options...
});