1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
{
  "type": "pie",
  "headers": [
    {
      "text": "Industry"
    },
    {
      "text": "%",
      "scope": "col"
    }
  ],
  "rows": [
    [
      {
        "text": "Data Set #1",
        "scope": "row"
      },
      {
        "text": "62"
      }
    ],
    [
      {
        "text": "Data Set #2",
        "scope": "row"
      },
      {
        "text": "5"
      }
    ],
    [
      {
        "text": "Data Set #3",
        "scope": "row"
      },
      {
        "text": "7"
      }
    ],
    [
      {
        "text": "Data Set #4",
        "scope": "row"
      },
      {
        "text": "8"
      }
    ],
    [
      {
        "text": "Data Set #5",
        "scope": "row"
      },
      {
        "text": "18"
      }
    ]
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="m-radial-chart" data-chart-wrapper>
	<div class="m-radial-chart__canvas">
		<canvas data-behavior="Chart" data-chart-type="{{ type | default("pie") }}">
			<table>
				<thead>
					<tr>
						{% for header in headers %}
							<{{header.tag|default('th')}} {% if header.scope %} scope="{{ header.scope }}" {% endif %}>{{ header.text }}</{{header.tag|default('th')}}>
						{% endfor %}
					</tr>
				</thead>
				<tbody>
					{% for row in rows %}
						<tr>
							{% for col in row %}
								<{{col.tag|default('td')}} {% if col.scope %} scope="{{ col.scope }}" {% endif %}>{{ col.text }}</{{col.tag|default('td')}}>
							{% endfor %}
						</tr>
					{% endfor %}
				</tbody>
			</table>
		</canvas>
	</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.m-radial-chart {
  display: flex;
  padding-top: 48px;
  padding-bottom: 40px;
  border-bottom-width: 1px;

  &__canvas {
    position: relative;
    width: 100%;
    max-width: 432px;
    margin-top: -16px;
    margin-bottom: -16px;
    canvas {
      width: 100% !important;
    }
  }

  &__legend {
    order: 1;
    flex-shrink: 0;

    @include spacing(
      (
        xsmall: 36px,
        "xlarge+": 80px,
      ),
      "margin-left"
    );
  }
}