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
{
  "type": "bar",
  "options": {
    "legend": false
  },
  "headers": [
    {
      "text": "Year"
    },
    {
      "text": "Value",
      "scope": "col"
    }
  ],
  "rows": [
    [
      {
        "tag": "th",
        "scope": "row",
        "text": "’12"
      },
      {
        "text": "12"
      }
    ],
    [
      {
        "tag": "th",
        "scope": "row",
        "text": "’13"
      },
      {
        "text": "33"
      }
    ],
    [
      {
        "tag": "th",
        "scope": "row",
        "text": "’14"
      },
      {
        "text": "21"
      }
    ]
  ]
}

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-chart" data-chart-wrapper>
	<div class="m-chart__canvas">
		<canvas data-behavior="Chart" data-chart-type="{{ type | default("bar") }}" {% for key, value in options %} {{ 'data-chart-' ~ key }}="{{value}}" {% endfor %}>
			<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
.m-chart {
  padding-top: 36px;
  margin-left: -3px;

  &__legend {
    @include width-multi(
      (
        xlarge: 4,
        xxlarge: 4,
        xxxlarge: 4,
      )
    );
  }

  &__canvas {
    position: relative;
    min-height: 400px;
    &:not(:only-child) {
      margin-top: 24px;
    }
  }
}