CODEWITHSUNDEEP
javascriptcsshighcharts
wrick17
wrick17

Reputation: 701

color sides of 3d pie chart in highcharts

I want to make a pie chart where i can give color to the side of the 3d pie chart, which is the darker blue color.

i can configure the lighter blue color, but the side color is taken based on the main color of the pie.

i want to individually color both the main surface and the sides.

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>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>

Upvotes: 0

Views: 563

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

You can still udpate colors using element.attr() option. There is point.graphic which contains all shapes for the slice.

Example below updates color on load and redraw event. You may want to use point.events.mouseOver/mouseOut to apply different color when hovering slice and restore your color.

function updateColors() {
    var chart = this, 
        graphic = chart.series[0].points[0].graphic; //get 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>

Upvotes: 1

depperm
depperm

Reputation: 10746

No you cannot adjust both color and shadow, unless you don't want the shadows to show at all. Using the colors option you can change the color of the slices, but the shadow is a shade of that color. If in the colors you use color names instead of hexadecimal values the color will whitewash everything and no shadow will be 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>

Upvotes: 2

Related Questions