Highcharts Gradient Pie Chart

To create a gradient 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, create a Highcharts chart object and configure it with the data and chart options. For example:

Highcharts.chart('chart-container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Gradient Pie Chart'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: false
      },
      showInLegend: true,
      center: ['50%', '50%'],
      size: '80%',
      innerSize: '60%',
      startAngle: -90,
      endAngle: 270,
      borderColor: 'transparent',
      borderWidth: 0,
      colors: [{
          radialGradient: {
            cx: 0.5,
            cy: 0.5,
            r: 0.5
          },
          stops: [
            [0, 'rgb(255, 0, 0)'],
            [1, 'rgb(255, 255, 0)']
          ]
        },
        {
          radialGradient: {
            cx: 0.5,
            cy: 0.5,
            r: 0.5
          },
          stops: [
            [0, 'rgb(0, 255, 0)'],
            [1, 'rgb(255, 0, 255)']
          ]
        },
        {
          radialGradient: {
            cx: 0.5,
            cy: 0.5,
            r: 0.5
          },
          stops: [
            [0, 'rgb(0, 0, 255)'],
            [1, 'rgb(0, 255, 255)']
          ]
        }
      ]
    }
  },
  series: [{
    name: 'Brands',
    data: [{
      name: 'Red',
      y: 33.33
    }, {
      name: 'Green',
      y: 33.33
    }, {
      name: 'Blue',
      y: 33.33
    }]
  }]
});

In this example, we're creating a gradient pie chart with the Highcharts chart function and passing in a set of options:

chart.type is set to 'pie' to create a pie chart
title.text is set to 'Gradient Pie Chart' to set the main title
plotOptions.pie is set to an object with various options to configure the pie chart, such as allowing point selection, showing a cursor on hover, centering the chart, and specifying the size and colors of the chart
series is set to an array of objects with a name and data property to define the series data

In the plotOptions.pie.colors option, we're specifying an array of color objects that define the gradient colors for each data point in the pie chart. The radialGradient property defines the gradient shape and position, and the stops property defines the color stops for the gradient.

With these options, you can create a gradient pie chart with customizable colors and gradient effects.

Customizing appearance in Highcharts Gradient Pie Chart:

Customize the appearance of the Gradient Pie Chart with gradient color options.

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Customizing Appearance in Highcharts Gradient Pie Chart'
    },
    series: [{
        name: 'Gradient Pie Chart',
        data: [
            { name: 'Category 1', y: 30 },
            { name: 'Category 2', y: 40 },
            { name: 'Category 3', y: 20 },
            { name: 'Category 4', y: 10 }
        ],
        colors: ['#FF5733', '#FFB233', '#FFE633', '#A1FF33'], // Gradient colors
        innerSize: '30%', // Inner size for a donut chart effect
    }],
    // Additional configuration options...
});

Adding data to Highcharts Gradient Pie Chart:

Add data to represent different slices in the Gradient Pie Chart.

series: [{
    name: 'Gradient Pie Chart',
    data: [
        { name: 'Category 1', y: 30 },
        { name: 'Category 2', y: 40 },
        { name: 'Category 3', y: 20 },
        { name: 'Category 4', y: 10 }
    ],
    colors: ['#FF5733', '#FFB233', '#FFE633', '#A1FF33'], // Gradient colors
    innerSize: '30%', // Inner size for a donut chart effect
}],

Highcharts Gradient Pie Chart live demo:

Explore a live demo of the Highcharts Gradient Pie Chart on your website.

<div id="container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
    // Highcharts Gradient Pie Chart configuration here...
</script>

Highcharts Gradient Pie Chart configuration options:

Explore various configuration options to fine-tune the Gradient Pie Chart.

chart: {
    type: 'pie'
},
title: {
    text: 'Gradient Pie Chart Configuration Options'
},
series: [{
    // Configuration options for the series
}],
// Additional configuration options...

Nested Gradient Pie Chart in Highcharts:

Create a nested Gradient Pie Chart for a hierarchical representation.

series: [{
    name: 'Outer Pie',
    data: [
        { name: 'Category A', y: 30 },
        { name: 'Category B', y: 40 }
    ],
    colors: ['#FF5733', '#FFB233'], // Gradient colors
    innerSize: '70%', // Inner size for nesting
    dataLabels: {
        enabled: false
    },
    id: 'outer-pie'
}, {
    name: 'Inner Pie',
    data: [
        { name: 'Subcategory 1', y: 20 },
        { name: 'Subcategory 2', y: 10 }
    ],
    colors: ['#FFE633', '#A1FF33'], // Gradient colors
    innerSize: '50%', // Inner size for nesting
    linkedTo: 'outer-pie'
}],

Exploded Gradient Pie Chart using Highcharts:

Make a slice explode for emphasis in the Gradient Pie Chart.

series: [{
    name: 'Gradient Pie Chart',
    data: [
        { name: 'Category 1', y: 30, sliced: true, selected: true },
        { name: 'Category 2', y: 40 },
        { name: 'Category 3', y: 20 },
        { name: 'Category 4', y: 10 }
    ],
    colors: ['#FF5733', '#FFB233', '#FFE633', '#A1FF33'], // Gradient colors
    innerSize: '30%', // Inner size for a donut chart effect
    allowPointSelect: true,
    slicedOffset: 10 // Offset for the exploded slice
}],

Interactive features in Highcharts Gradient Pie Chart:

Implement interactive features for a better user experience.

chart = Highcharts.chart('container', {
    series: [{
        name: 'Gradient Pie Chart',
        data: [
            { name: 'Category 1', y: 30 },
            { name: 'Category 2', y: 40 },
            { name: 'Category 3', y: 20 },
            { name: 'Category 4', y: 10 }
        ],
        colors: ['#FF5733', '#FFB233', '#FFE633', '#A1FF33'], // Gradient colors
        innerSize: '30%', // Inner size for a donut chart effect
        point: {
            events: {
                click: function (event) {
                    alert('Clicked on slice: ' + this.name);
                }
            }
        }
    }]
});