[data-pie-id] > *:nth-child(7n+1), [data-bar-id] > *:nth-child(7n+1), [data-line-id] > *:nth-child(7n+1) {
  color: #1F77B4; }
[data-pie-id] > *:nth-child(7n+2), [data-bar-id] > *:nth-child(7n+2), [data-line-id] > *:nth-child(7n+2) {
  color: #FF7F0E; }
[data-pie-id] > *:nth-child(7n+3), [data-bar-id] > *:nth-child(7n+3), [data-line-id] > *:nth-child(7n+3) {
  color: #2CA02C; }
[data-pie-id] > *:nth-child(7n+4), [data-bar-id] > *:nth-child(7n+4), [data-line-id] > *:nth-child(7n+4) {
  color: #D62728; }
[data-pie-id] > *:nth-child(7n+5), [data-bar-id] > *:nth-child(7n+5), [data-line-id] > *:nth-child(7n+5) {
  color: #9467BD; }
[data-pie-id] > *:nth-child(7n+6), [data-bar-id] > *:nth-child(7n+6), [data-line-id] > *:nth-child(7n+6) {
  color: #8C564B; }
[data-pie-id] > *:nth-child(7n+7), [data-bar-id] > *:nth-child(7n+7), [data-line-id] > *:nth-child(7n+7) {
  color: #E377C2; }

#pie, #donut, #bar {
  max-height: 450px; }


svg {
  width: 100%;
  height: auto; }

.tooltip {
  margin-left: -5px;
  border-radius: 3px;
  padding: 5px; }

ul[data-pie-id] {
  list-style: none;
  padding: 10px; }