Not an Issue(Misleading): Styling about chartist-plugin-legend

[annie-l]

thank you @raevillena! converted your comments for easier cut and paste right into css:

.ct-legend {
  position: relative;
  text-align: center; /*position of the group, use either left or right*/
  z-index: 10;
}
.ct-legend li {
  display:inline; /* make the legend in one row */
  text-align: center;
  position: relative;
  padding-left: 23px;
  list-style-type:none /* makes the default bullet invisible */
}
.ct-legend li:before {
  width: 15px; /* how big is the color */
  height: 15px; /* how big is the color */
  position: absolute;
  left: 0;
  content: '';
  border: 3px solid transparent;
  border-radius: 2px;
}
.ct-legend.ct-legend-inside {
  position: absolute;
  top: 0;
  right: 0;
}
.ct-series-1 {
  margin-left: 20px;
}
.ct-series-2 {
  margin-left: 20px;
}
.ct-series-0:before {
  background-color: green; /* you have yo match the color to your chartist stroke for each line or whatever */
  border-color: green;
  margin-top: 3px;
}
.ct-series-1:before {
  background-color: #c1682c;
  border-color: #c1682c;
  margin-top: 3px;
}
.ct-series-2:before {
  background-color: #058cc6;
  border-color: #058cc6;
  margin-top: 3px;
}