ZingChart nested pie: customising chart

Question

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:

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

Answer 1

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.