Not an Issue(Misleading): Styling

[raevillena]

This is not an issue but I just wanna leave it here for beginner like me.

The CSS in the description log is actually not a css3 but in SCSS syntax. Adding it directly to your react project or others maybe will not work.

What I did: Converted it to CSS3 to my needs
here is a example of it

            .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;
	}

//add series # up to the one you want styling

[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;
}