1
2
3
4
5
6
7
8
9
10
11
12
{
  "items": [
    {
      "text": "Data Set",
      "color": "#009BDB"
    },
    {
      "text": "Data Set",
      "color": "#BEC7D0"
    }
  ]
}

1
2
3
4
5
6
7
<ul class="m-chart-legend {{ inline ? " m-chart-legend--inline" }}">
	{% for item in items %}
		<li class="a-chart-legend-label" style="color: {{ item.color }}">
			<span>{{ item.text }}</span>
		</li>
	{% endfor %}
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.m-chart-legend {
  &--inline {
    display: flex;
    flex-wrap: wrap;

    @include child-spacing-x(
      (
        xsmall: 20px
      )
    );
  }

  @include child-spacing-y(
    (
      xsmall: 4px
    )
  );
}