``Change the color of the sections in a 3D pie chart on a Highcharts

I am looking to create a custom pie chart with two different colors: one for the main surface and another for the sides. Currently, I can only configure the lighter blue color for the main surface, but I would like to also change the darker blue color for the sides of the 3D pie chart.

Is there a way to individually specify colors for both the main surface and the sides of the pie chart using Highcharts?

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 60
    }
  },
  plotOptions: {
    pie: {
      depth: 150,
      animation: false,
      states: {
        hover: false
      }
    }
  },
  series: [{
    data: [
      ['apple', 8]
    ]
  }],
  tooltip: {
    enabled: false
  }
});
<!DOCTYPE html>
<html>
<head>
  <title>My Custom Pie Chart</title>
</head>
<body>

  <div id="container" style="height: 400px"></div>

  <script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/highcharts-3d.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

javascriptcsshighcharts

Answer №1

It is not possible to adjust both the color and shadow simultaneously, unless you want the shadows to be completely hidden. When using the colors option, you can only change the color of the slices, as the shadow will always be a shade of that color. If you input color names instead of hexadecimal values in the colors section, everything will appear whitewashed with no shadow being displayed.

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 60
    }
  },
  colors: ['#008000' ],
  plotOptions: {
    pie: {
      depth: 150,
      animation: false,
      states: {
        hover: false
      }
    }
  },
  series: [{
    data: [
      ['apple', 8]
    ]
  }],
  tooltip: {
    enabled: false
  }
});
<!DOCTYPE html>
<html>
<head>
  <title>tyre</title>
</head>
<body>

  <div id="container"  style="height: 400px"></div>

  <script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/highcharts-3d.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

Answer №2

One way to update colors is by using the element.attr() option to target various shapes within a slice, such as point.graphic.

The example below demonstrates how to change colors on both load and redraw events. You can also utilize point.events.mouseOver/mouseOut to dynamically alter the color when hovering over a slice.

function updateColors() {
    var chart = this, 
        graphic = chart.series[0].points[0].graphic; //retrieve first slice

    graphic.side1.attr({ fill: "red" });
    graphic.side2.attr({ fill: "orange" });
    graphic.inn.attr({ fill: "black" });
    graphic.out.attr({ fill: "yellow" });
    graphic.top.attr({ fill: "grey" });
}
 
var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'pie',
    events: {
      redraw: updateColors,
      load: updateColors
    },
    options3d: {
      enabled: true,
      alpha: 60
    }
  },
  plotOptions: {
    pie: {
      depth: 150,
      animation: false,
      states: {
        hover: false
      }
    }
  },
  series: [{
    data: [
      ['apple', 8]
    ]
  }],
  tooltip: {
    enabled: false
  }
});
<!DOCTYPE html>
<html>
<head>
  <title>tyre</title>
</head>
<body>

  <div id="container"  style="height: 400px"></div>

  <script src="http://code.highcharts.com/adapters/standalone-framework.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/highcharts-3d.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The CSS code designed to limit the display to only a two-line sentence is failing to work properly in Internet Explorer

I've implemented the following CSS code to ensure that the display sentence doesn't exceed 2 lines, with the remaining text being replaced by "...". .bell-notification-max-words-display { overflow: hidden; display: -webkit-box; ...

cssinternet-explorer

Executing PHP Code with an External JavaScript File in an HTML Document

I have a script called initialize_database.js that utilizes JQuery to trigger a PHP script for creating a database and some tables. I made sure the PHP script is working correctly by adding HTML to test it independently, and it performed as expected. Below ...

javascriptphpjqueryhtml

JavaScript document string separation

Hi there, I'm a newbie here and could really use some assistance. I am struggling with creating a function and would appreciate any ideas... To give you an idea of what I need help with, I have a String and I want to check if it contains a specific w ...

javascripthtmlstring

Leverage the exported data from Highcharts Editor to create a fresh React chart

I am currently working on implementing the following workflow Create a chart using the Highcharts Editor tool Export the JSON object from the Editor that represents the chart Utilize the exported JSON to render a new chart After creating a chart through ...

javascriptreactjstypescripthighcharts

Using jQuery to send data with an AJAX post request when submitting a form with

This is the code I'm working with: <html> <body> <?php include('header.php'); ?> <div class="page_rank"> <form name="search" id="searchForm" method="post"> <span class="my_up_text">ENTER THE WEBSITE TO ...

javascriptjqueryajaxajaxform

Use HTML to showcase an image that dynamically changes based on the outcome of a query function

Hello there, I hope my inquiry is clear enough. I apologize for reaching out as I am unsure where to begin and what exactly I should be focusing on. Currently, I have an image displayed in an HTML page like this: <div id="tag_sunrise_sunset"><p ...

javascripthtmlcssajax

Tips for incorporating a User ID object into an Ajax request

Currently, I am delving into the world of web development and tackling a client-server project that involves allowing users to authenticate themselves and store their blood pressure readings. While the authentication part is functioning properly, I am enco ...

javascriptajaxmongoose

Arranging based on attribute data

I'm currently working on organizing a collection of divs that have unique custom data attributes which I aim to sort based on user selection. For instance, if 'followers' is chosen, the .box elements will be arranged according to their data- ...

javascriptjqueryhtmlcustom-data-attribute

Mastering callback functions within AngularJS animations

As I delve into AngularJS animations, I am currently working on a slide-show animation: app.animation('slide-show', function () { return { setup: function (element) { }, start: function (element, done) { e ...

javascriptanimationangularjscallback

Retrieving users by their Id's from MySql database using NodeJS

Goal: I aim to gather a list of users from a table based on the currently logged-in user. I have successfully stored all user IDs in an array and now wish to query those users to display a new list on the front end. Progress Made: I have imported necessa ...

javascriptmysqlnode.jsexpress

What is causing this issue that is preventing me from async rendering Vue components?

I am new to working with Vue and I am attempting to lazy load a Component. However, I encountered an error that seems to be related to a syntax issue. Below is the code snippet: <template> <div class="container"> <h1>Asy ...

javascriptvue.jsasynchronousvuejs3lazy-loading

How can I merge these two Observables in Angular to create an array of objects?

Let's say we are working with two different datasets: student$ = from([ {id: 1, name: "Alex"}, {id: 2, name: "Marry"}, ]) address$ = from([ {id: 1, location: "Chicago", sid: 1}, {id: 2, location: &qu ...

javascriptangulartypescriptrxjs

centering pictures vertically on my webpage

Below is the code I am currently working with. It displays an image on the left and a description with a button on the right, side-by-side within the "promo_box_wrapper" container. However, I'm struggling to vertically align the image within its surro ...

htmlcss

Inquiring about socket.io: How can an io emit its own signal?

I am currently working on implementing the emit event in an express router, and I'm attempting to pass a global.io variable. However, I've encountered an issue where despite adding the following code: io.emit('join','Tudis' ...

javascriptexpresssocket.ioemit

Trouble with displaying class object array in Angular 5 using ngFor loop

I am attempting to loop through an array of class objects to populate a dropdown menu in Angular 5. However, the dropdown menu is not showing any options and there are no errors appearing in the browser console. The object array is created based on this m ...

javascriptarraysangularngfor

Using jquery to navigate back to the search results page

I am trying to figure out how to use jquery to return to the search results page, but my current code always takes me back to the main data instead of the search results. Can anyone help me with this issue? $(document).ready(function() { $("#kembali ...

javascriptjquery

Tips for centering a <div> vertically within another <div> ?

I have a project to develop a shopping cart, and I am currently working on aligning my item total in the center of its container. Here is the code snippet I have so far: .itemInfo { display: table; width: 100%; } .itemTotal { display: table-cel ...

htmlcssbootstrap-4

Tips for inputting information without redundancy after selecting a specific designation

I'm experiencing a challenge with this code as it repeats when already chosen. My goal is to add data in the database once something has been selected. When I click on spin, the randomizer will choose a name and update their status to "done". Subsequ ...

javascriptphpajaxhtml

Incorporate VLC player into a webpage without any visible control options

Is there a way to embed a flash video in a webpage without showing any controls? I managed to embed a flash video using VLC with the following code: <embed src="img/Wildlife.wmv" height="480" width="640"> However, I want the video to play without ...

javascriptjqueryhtmlflashvideo

Looking for guidance on implementing throttle with the .hover() function in jQuery?

Seeking a way to efficiently throttle a hover function using jQuery. Despite various examples, none seem to work as intended. The use of $.throttle doesn't throw errors but ends up halting the animation completely. Here is the code snippet in question ...

javascriptjquerythrottling