interpolated-charts/docs/main.css

Configurable d3 v4 charts with interpolation and missing data range

.line-chart .horizontal-grid-line {
  fill: none;
  shape-rendering: crispEdges;
  stroke: #EFF2F5;
  stroke-width: 1;
  stroke-dasharray: 4, 4;
}

.line-chart .vertical-grid-line {
  fill: none;
  shape-rendering: crispEdges;
  stroke: #EFF2F5;
  stroke-width: 1;
  stroke-dasharray: 4, 4;
}

.bar-chart .horizontal-grid-line {
  fill: none;
  shape-rendering: crispEdges;
  stroke: #EFF2F5;
  stroke-width: 1;
  stroke-dasharray: 4, 4;
}

.bar-chart .vertical-grid-line {
  fill: none;
  shape-rendering: crispEdges;
  stroke: #EFF2F5;
  stroke-width: 1;
  stroke-dasharray: 4, 4;
}

.stack-background {
  fill: #FFF;
  opacity: 0;
  pointer-events: all;
  transition: all .2s ease;
}

.stack-background:hover {
  fill: #EEE;
  opacity: 1;
}

.bar {
  pointer-events: none;
}

.metadata-container .tooltip {
  fill: #FFF;
}

.metadata-container .tooltip rect {
  stroke: grey;
  stroke-width: 1px;
  rx: 0.32em;
  ry: 0.32em;
}

.metadata-container .tooltip .tooltip-container {
  padding: .5em;
}

.metadata-container .tooltip .tooltip-header {
  text-align: center;
}

.metadata-container .tooltip .tooltip-header p {
  margin: 0;
  display: inline-block;
  line-height: 1em;
}

.metadata-container .tooltip .circle {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: .5em;
  line-height: 1em;
}

.metadata-container .tooltip .topic {
  line-height: 1em;
  display: flex;
  padding: .3em 0;
}

.metadata-container .tooltip .topic-name {
  line-height: 1em;
  margin-left: .5em;
}

.metadata-container .tooltip .topic-value {
  line-height: 1em;
  align-self: flex-start;
  flex: 1;
  text-align: right;
}

.metadata-container .divider {
  stroke: grey;
  pointer-events: none;
}



.container {
  max-width: 1200px;
  margin: auto;
}

@media (max-width: 1200px) {
  .container {
    max-width: 100%;
  }
}

.chart-example {
  padding: 1em;
  text-align: center;
}

.chart-example .description {
  text-align: center;
}

pre {
  text-align: left;
  margin: 0;
  background-color: #EEE;
  border: 1px solid grey;
  padding: 1em;
}

.source-code {
  max-width: 700px;
  margin: auto;
}