Search code examples
zingchart

ZingChart nested pie: customising chart

How can I get a nested ZingChart pie chart to (a) start at 12 o'clock, and (b) have different colours for the rings?

I've tried using the plot.styles array for the colours, and the refAngle for the starting angle, but those only seem to apply to normal pie charts, not nested ones.

In the screenshot below, it should start at 'north', and I'd like to colour one 'ring' dark blue and another light blue:

enter image description here

Demo: https://app.zingsoft.com/demos/create/Q04K1SFA

Solution

  • For the North orientation, in your configuration just add

      plot: {
    refAngle: -90
  },

    If you want 2 slices to have different colors, use 2 items in your series:

            {
            text: 'Used',
            values: [10, 0],
            backgroundColor: "blue"
        },
        {
            text: 'Used',
            values: [0, 50],
            backgroundColor: "lightblue"
        },

    example

    You can also change color depending on a rule. For instance:

      plot: {
    refAngle: -90,
    rules: [
        {
          rule: '%v > 11 && "%t" == "Used"',
          backgroundColor: 'lightblue'
        }
      ]
  },

    will change the background color of items when the item text is "Used" and the value is greater than 11.

    You can also name your levels and use it's value in your rule:

      plot: {
    refAngle: -90,
    "data-level": [1, 2],
    rules: [
        {
          rule: '%data-level == 2 && "%t" == "Used"',
          backgroundColor: 'lightblue'
        }
      ]
  }

    Rule will apply only on the second level for "Used" items.