horizon/openstack_dashboard/static/dashboard/scss/components/_charts.scss

.chart {
  height: inherit;
  min-height: inherit;
  min-width: inherit;
  .tooltip_detail {
    position: absolute;
    z-index: 2;
    border-radius: 3px;
    padding: 0.25em;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: white;
    border: 1px solid rgba(0, 0, 0, 0.4);
    margin-left: 1em;
    margin-top: -1em;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.8); }
  .tooltip_detail:before {
    content: "\25c2";
    position: absolute;
    left: -0.5em;
    color: rgba(0, 0, 0, 0.7);
    width: 0;
    top: 12px; } }

.overview_chart {
  width: 214px;
  height: $overview_chart_height;
  .chart_container {
    width: 140px;
    min-width: 140px;
    .chart svg {
      padding-right: 4px !important; }
    .chart .detail .dot.active {
      box-sizing: content-box; }}
  .bar_chart_container {
    position: relative;
    width: 74px;
    min-width: 74px; }
  .bar_chart_container, .chart_container {
    float: left;
    min-height: $overview_chart_height;
    height: $overview_chart_height;
    .chart {
      height: inherit;
      width: inherit;
      min-height: inherit;
      min-width: inherit;
      .modal-backdrop {
        min-height: inherit;
        min-width: inherit; } } }
  .tooltip_detail {
    position: absolute;
    z-index: 2;
    border-radius: 3px;
    padding: 0.25em;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: white;
    border: 1px solid rgba(0, 0, 0, 0.4);
    margin-left: 1em;
    margin-top: -1em;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.8); }
  .tooltip_detail:before {
    content: "\25c2";
    position: absolute;
    left: -0.5em;
    color: rgba(0, 0, 0, 0.7);
    width: 0;
    top: 12px; } }

$min_height_fullscreen_chart: 300px;
$min_width_fullscreen_chart: 400px;
$min_width_fullscreen_chart_legend: 90px;

.chart_container {
  position: relative;
  min-height: $min_height_fullscreen_chart;
  min-width: $min_width_fullscreen_chart;
  .chart {
    position: relative;
    min-height: $min_height_fullscreen_chart;
    min-width: $min_width_fullscreen_chart;
    .detail {
      .x_label {
        display: none; }
      .item {
        line-height: 1.4;
        padding: 0.5em; }
      .date {
        color: #a0a0a0; } }
    .modal-backdrop {
      position: absolute;
      opacity: 0.5;
      top: 0;
      left: 0;
      min-height: $min_height_fullscreen_chart;
      min-width: $min_width_fullscreen_chart; }
    svg {
      padding: 0 0 5px 0; } }
  .detail_swatch {
    float: right;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px 0 0; } }

.legend_container {
  min-width: $min_width_fullscreen_chart_legend;
  margin-left: 20px;
  .swatch {
    float: right;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px 0 0; }
  .modal-backdrop {
    position: absolute;
    opacity: 0.5;
    top: 0;
    left: 0;
    min-width: 90px; }
  .rickshaw_legend.disabled {
    padding: 0; } }

.spinner_wrapper {
  position: absolute;
  top: 40%;
  left: 40%; }

.rickshaw_legend {
  background: white;
  color: #404040;
  .action {
    text-decoration: none;
    color: black; } }