@swimlane/ngx-charts/release/ngx-charts.css

Declarative Charting Framework for Angular2 and beyond!

.ngx-tooltip-content {
  position: fixed;
  border-radius: 3px;
  z-index: 5000;
  display: block;
  font-weight: normal;
  opacity: 0;
  pointer-events: none; }
  .ngx-tooltip-content.type-popover {
    background: #fff;
    color: #060709;
    border: 1px solid #72809b;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    padding: 4px; }
    .ngx-tooltip-content.type-popover .tooltip-caret {
      position: absolute;
      z-index: 5001;
      width: 0;
      height: 0; }
      .ngx-tooltip-content.type-popover .tooltip-caret.position-left {
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-left: 7px solid #fff; }
      .ngx-tooltip-content.type-popover .tooltip-caret.position-top {
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 7px solid #fff; }
      .ngx-tooltip-content.type-popover .tooltip-caret.position-right {
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right: 7px solid #fff; }
      .ngx-tooltip-content.type-popover .tooltip-caret.position-bottom {
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #fff; }
  .ngx-tooltip-content.type-tooltip {
    color: #fff;
    background: rgba(0, 0, 0, 0.75);
    font-size: 12px;
    padding: 0 10px;
    text-align: center;
    pointer-events: auto; }
    .ngx-tooltip-content.type-tooltip .tooltip-caret.position-left {
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 7px solid rgba(0, 0, 0, 0.75); }
    .ngx-tooltip-content.type-tooltip .tooltip-caret.position-top {
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-top: 7px solid rgba(0, 0, 0, 0.75); }
    .ngx-tooltip-content.type-tooltip .tooltip-caret.position-right {
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-right: 7px solid rgba(0, 0, 0, 0.75); }
    .ngx-tooltip-content.type-tooltip .tooltip-caret.position-bottom {
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid rgba(0, 0, 0, 0.75); }
  .ngx-tooltip-content .tooltip-caret {
    position: absolute;
    z-index: 5001;
    width: 0;
    height: 0; }
  .ngx-tooltip-content.position-right {
    transform: translate3d(10px, 0, 0); }
  .ngx-tooltip-content.position-left {
    transform: translate3d(-10px, 0, 0); }
  .ngx-tooltip-content.position-top {
    transform: translate3d(0, -10px, 0); }
  .ngx-tooltip-content.position-bottom {
    transform: translate3d(0, 10px, 0); }
  .ngx-tooltip-content.animate {
    opacity: 1;
    transition: opacity 0.3s, transform 0.3s;
    transform: translate3d(0, 0, 0);
    pointer-events: auto; }

.ngx-charts {
  float: left; }
  .ngx-charts .circle,
  .ngx-charts .bar,
  .ngx-charts .arc {
    cursor: pointer; }
  .ngx-charts .bar.active, .ngx-charts .bar:hover,
  .ngx-charts .cell.active,
  .ngx-charts .cell:hover,
  .ngx-charts .arc.active,
  .ngx-charts .arc:hover,
  .ngx-charts .card.active,
  .ngx-charts .card:hover {
    opacity: 0.8;
    transition: opacity 100ms ease-in-out; }
  .ngx-charts .bar:focus,
  .ngx-charts .cell:focus,
  .ngx-charts .arc:focus,
  .ngx-charts .card:focus {
    outline: none; }
  .ngx-charts g:focus {
    outline: none; }
  .ngx-charts .line-series.inactive,
  .ngx-charts .area-series.inactive {
    transition: opacity 100ms ease-in-out;
    opacity: .2; }
  .ngx-charts .line-highlight {
    display: none; }
    .ngx-charts .line-highlight.active {
      display: block; }
  .ngx-charts .area {
    opacity: 0.6; }
  .ngx-charts .circle:hover {
    cursor: pointer; }
  .ngx-charts .tree-map .label p {
    display: table-cell;
    text-align: center;
    line-height: 1.2em;
    vertical-align: middle; }

.ngx-tooltip-content {
  pointer-events: none !important; }
  .ngx-tooltip-content .tooltip-label {
    display: block;
    line-height: 1em;
    padding: 8px 5px 5px 5px;
    font-size: 1em; }
  .ngx-tooltip-content .tooltip-val {
    display: block;
    font-size: 1.3em;
    line-height: 1em;
    padding: 0 5px 8px 5px; }

.label {
  font-size: 12px;
  font-weight: normal; }

.gridline-path {
  stroke: #ddd;
  stroke-width: 1;
  fill: none; }

.grid-panel rect {
  fill: none; }

.grid-panel.odd rect {
  fill: rgba(0, 0, 0, 0.05); }

.a2d3-container {
  height: 100%; }
  .a2d3-container .status-message {
    font-size: 14px;
    text-align: center;
    position: relative;
    top: 43%;
    color: #999; }
  .a2d3-container .icon-loading {
    color: #999;
    font-size: 32px; }

.timeline .brush-background {
  fill: rgba(0, 0, 0, 0.05); }

.timeline .brush .selection {
  fill: rgba(0, 0, 0, 0.1);
  stroke-width: 1px;
  stroke: #888888; }

.timeline .brush .handle {
  fill-opacity: 0; }

.timeline .embedded-chart {
  opacity: 0.6; }

.area-tooltip-container {
  padding: 5px 0;
  pointer-events: none; }

.tooltip-item {
  text-align: left;
  line-height: 1.2em;
  padding: 5px 0; }
  .tooltip-item .tooltip-item-color {
    display: inline-block;
    height: 12px;
    width: 12px;
    margin-right: 5px;
    color: #5b646b;
    border-radius: 3px; }

.chart-legend {
  display: inline-block;
  padding: 0;
  width: auto !important; }
  .chart-legend .legend-title {
    white-space: nowrap;
    overflow: hidden;
    margin-left: 10px;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: bold; }
  .chart-legend ul, .chart-legend li {
    padding: 0;
    margin: 0;
    list-style: none; }
  .chart-legend .legend-wrap {
    width: 90%; }
  .chart-legend .scale-legend {
    text-align: center;
    display: flex;
    flex-direction: column; }
  .chart-legend .scale-legend-wrap {
    display: inline-block;
    flex: 1;
    width: 30px;
    border-radius: 5px;
    margin: 0 auto; }
  .chart-legend .scale-legend-label {
    font-size: 12px; }
  .chart-legend .legend-labels {
    line-height: 85%;
    list-style: none;
    text-align: left;
    float: left;
    width: 100%;
    border-radius: 3px;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.05); }
  .chart-legend .legend-label {
    cursor: pointer;
    font-size: 90%;
    margin: 8px;
    color: #76818a; }
    .chart-legend .legend-label:hover {
      color: #000;
      -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      transition: 0.2s; }
    .chart-legend .legend-label .active .legend-label-text {
      color: #000; }
  .chart-legend .legend-label-color {
    display: inline-block;
    height: 15px;
    width: 15px;
    margin-right: 5px;
    color: #5b646b;
    border-radius: 3px; }
  .chart-legend .legend-label-text {
    display: inline-block;
    vertical-align: top;
    line-height: 15px;
    font-size: 12px;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 20px; }
  .chart-legend .legend-icon {
    color: #4d9df6;
    margin-right: 5px; }
  .chart-legend .legend-title-text {
    vertical-align: bottom;
    display: inline-block;
    line-height: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }

.advanced-pie {
  display: inline-block;
  float: left; }

.advanced-pie-legend-wrapper {
  display: inline-block; }

.advanced-pie-legend {
  float: left;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%); }
  .advanced-pie-legend .total-value {
    font-size: 36px; }
  .advanced-pie-legend .total-label {
    font-size: 24px;
    margin-bottom: 19px; }
  .advanced-pie-legend .legend-items-container {
    width: 100%; }
    .advanced-pie-legend .legend-items-container .legend-items {
      white-space: nowrap;
      overflow: auto; }
      .advanced-pie-legend .legend-items-container .legend-items .legend-item {
        margin-right: 20px;
        display: inline-block;
        cursor: pointer; }
        .advanced-pie-legend .legend-items-container .legend-items .legend-item:focus {
          outline: none; }
        .advanced-pie-legend .legend-items-container .legend-items .legend-item:hover {
          color: #000;
          -webkit-transition: 0.2s;
          -moz-transition: 0.2s;
          transition: 0.2s; }
        .advanced-pie-legend .legend-items-container .legend-items .legend-item .item-value {
          font-size: 24px;
          margin-top: -6px;
          margin-left: 11px; }
        .advanced-pie-legend .legend-items-container .legend-items .legend-item .item-label {
          font-size: 12px;
          opacity: 0.7;
          margin-left: 11px;
          margin-top: -6px; }
        .advanced-pie-legend .legend-items-container .legend-items .legend-item .item-percent {
          font-size: 24px;
          opacity: 0.7;
          margin-left: 11px; }
        .advanced-pie-legend .legend-items-container .legend-items .legend-item .item-color {
          width: 4px;
          height: 32px;
          float: left;
          margin-right: 7px; }

.pie-label {
  font-size: 11px; }

.pie-grid .arc1 {
  opacity: 0.4; }

.pie-grid .percent-label {
  font-size: 16px;
  font-weight: 400; }

.force-directed-graph .edge {
  stroke: #333; }

.tree-map .treemap-val {
  font-size: 1.3em;
  padding-top: 5px;
  display: inline-block; }

.gauge .background-arc path {
  fill: rgba(0, 0, 0, 0.05); }

.gauge .gauge-tick path {
  stroke: #666; }

.gauge .gauge-tick text {
  font-size: 12px;
  fill: #666;
  font-weight: bold; }

.gauge .gauge-tick-large path {
  stroke-width: 2px; }

.gauge .gauge-tick-small path {
  stroke-width: 1px; }

.linear-gauge {
  cursor: pointer; }
  .linear-gauge .background-bar path {
    fill: rgba(0, 0, 0, 0.05); }
  .linear-gauge .units {
    fill: #666; }