chartist-js/site/styles/_example-charts.scss

#chartist-guy #chart-canvas {
  @include ct-chart($ct-text-color: darken($color-white, 50%), $ct-grid-color: darken($color-white, 20%));

  .ct-series-a {
    .ct-point {
      @include ct-chart-point($ct-point-shape: square, $ct-point-size: 8px);
    }

    .ct-line {
      @include ct-chart-line($ct-line-dasharray: 5px);
      @include animation(dashoffset, 1s linear infinite);
    }
  }
}

#example-line-months-interpolation {
  @include ct-chart($ct-text-color: lighten($color-gray, 30%), $ct-grid-color: lighten($color-gray, 5%), $ct-grid-dasharray: 3px);

  .ct-series-a {
    .ct-point {
      @include ct-chart-point($ct-point-shape: square);
    }

    .ct-line {
      @include ct-chart-line($ct-line-width: 4px, $ct-line-dasharray: 5px);
      @include animation(dashoffset, 1s linear infinite);
    }
  }

  .ct-series-b {
    .ct-point {
      @include animation(bouncing-stroke, 0.5s ease infinite);
    }

    .ct-line {
      @include ct-chart-line($ct-line-width: 3px);
    }
  }

  .ct-series-c {
    .ct-point {
      @include animation(exploding-stroke, 1s ease-out infinite);
    }

    .ct-line {
      @include ct-chart-line($ct-line-width: 2px, $ct-line-dasharray: 40px 3px);
    }
  }
}

#example-plugin-threshold {
  .ct-line {
    stroke-dasharray: 5px;
    animation: dashoffset 1s linear infinite;
  }

  .ct-line.ct-threshold-above, .ct-point.ct-threshold-above, .ct-bar.ct-threshold-above {
    stroke: #f05b4f;
  }

  .ct-line.ct-threshold-below, .ct-point.ct-threshold-below, .ct-bar.ct-threshold-below {
    stroke: #59922b;
  }

  .ct-area.ct-threshold-above {
    fill: #f05b4f;
  }

  .ct-area.ct-threshold-below {
    fill: #59922b;
  }
}

#example-plugin-fill-donut {
  .ct-chart-donut .ct-series-a .ct-slice-donut {
    stroke: #d70206;
  }

  .ct-chart-donut .ct-series-b .ct-slice-donut {
    stroke: rgba(0,0,0,.4);
    opacity: 0.0;
  }

  .ct-chart-donut .ct-fill-donut .ct-slice-donut {
    stroke: rgba(0,0,0,.4);
    opacity: 1;
  }

  .ct-fill-donut-label {
    h3 {
      font-weight: bolder;
    }

    small {
      font-size: 0.6em;
    }


    i {
      font-size: 1.5em;
    }

  }
}
#example-plugin-zoom {
  .ct-zoom-rect {
		  fill: rgba(200, 100, 100, 0.3);
		  stroke: red;
	  }
}
#example-plugin-tooltip {
  .chart {
    position: relative;
  }

  .chartist-tooltip {
    position: absolute;
    display: block;
    min-width: 5em;
    padding: .5em;
    background: #F4C63D;
    color: #453D3F;
    font-family: Oxygen,Helvetica,Arial,sans-serif;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
    z-index: 1;
    -webkit-transition: opacity .2s linear;
    -moz-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    transition: opacity .2s linear; }
  .chartist-tooltip:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top-color: #F4C63D; }
  .chartist-tooltip.tooltip-show {
    opacity: 1; }
}