<div class="little-container">
  <div class="micro-graph"></div>
</div>

<pre>
var coffees = {
  Mon: 3,
  Tues: 2,
  Wed: 4,
  Thu: 2,
  Fri: 2,
  Sat: 0,
  Sun: 2
};
</pre>
html,
body {
  height: 100%;
  margin: 0; padding: 0;
}
body {
    background: #1b1e23;
    color: white;
    font-family: sans-serif;
    display: flex;
  flex-direction: column;
    justify-content: center;
  align-items: center;
}

p {
font-size: 0.75em;
  margin-bottom: 2em;
}

h1, h2 {
  font-size: 1.5rem;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.row {
    margin-top: 2em;
}

.little-container {
  width: 100px;
}

.light {
    background: white;
  padding: 2em 0;
  margin-top: 2em;
  .row {
    margin: 0;
  }
}

.col {
    padding: 1em;
}

.fifty {
    width: 50%;
}

// Graphiq starts

.graphiq {
  width: 100%;
  position: relative;
  display: flex;
  
  &__graph-layout {
    flex: 1;
    overflow-x: hidden;
  }

  &__graph-values {
    font-size: 0.5em;
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 1.25em;
    text-align: right;
    font-weight: bold;
  }

  &__line {
    fill: none;
    stroke-miterlimit: 10;
   // display: none;
  }


  &__y-division {
    fill: none;
    stroke-miterlimit: 10;
    z-index: -1;
    transition: 0.25s ease-in;
  }
  &__graph-dot {
    transition: stroke-width ease-in-out 0.2s;
    transform-origin: 50% 50%;
   // display: none;
  }

  &__value-dialog {
    display: block;
    position: absolute;
    background: red;
    color: white;
    font-size: 0.5em;
    line-height: 0;
    padding: 0;
    font-weight: bold;
    animation: float 0.3s ease-out forwards;
  }

}
@keyframes float {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(5px);
  }
}

var coffees = {
  Mon: 3,
  Tues: 2,
  Wed: 4,
  Thu: 2,
  Fri: 2,
  Sat: 0,
  Sun: 2
};

// Graphiq is a graph generator I wrote


(function($) {
  $.fn.graphiq = function(options) {
    // Default options
    var settings = $.extend(
      {
        data: {},
        colorLine: "#6ca5f5",
        colorDot: "#c3ecf7",
        colorXGrid: "#7f7f7f",
        colorYGrid: "#7f7f7f",
        colorLabels: "#FFFFFF",
        colorUnits: "#FFFFFF",
        colorRange: "#FFFFFF",
        colorFill: "#533c68",
        colorDotStroke: "#FFFFFF",
        dotStrokeWeight: 0,
        fillOpacity: 0.25,
        rangeOpacity: 0.5,
        dotRadius: 3,
        lineWeight: 2,
        yLines: true,
        dots: true,
        xLines: true,
        xLineCount: 5,
        fill: true,
        height: 100,
        fluidParent: null
      },
      options
    );

    var values = [];
    var entryDivision;
    var dataRange = settings.height + settings.dotRadius;
    var parent = this;
    var maxVal;
    var scaleFactor = settings.height / 100;
    var pathPoints = "";
    for (var key in settings.data) {
      values.push(settings.data[key]);
    }

    parent.append(
      '<div class="graphiq__graph-values"></div><div class="graphiq__graph-layout"><svg class="graphiq__graph" viewBox="0 0 960 ' +
        (settings.height + 10) +
        '" shape-rendering="geometricPrecision"><path fill="' +
        settings.colorFill +
        '" style="opacity: ' +
        settings.fillOpacity +
        '" class="graphiq__fill-path" d="" stroke-width="0" stroke="#000" fill="cyan"/></svg></div>'
    );
    if (settings.fluidParent) {
      this.closest(".col").css("overflow", "auto");
    }
    parent.addClass("graphiq");

    var graph = this.find(".graphiq__graph");

    maxVal = Math.max.apply(Math, values);

    this.find(".graphiq__graph-values").append(
      '<span style="color: ' +
        settings.colorRange +
        "; opacity: " +
        settings.rangeOpacity +
        '">' +
        maxVal +
        '</span><span style="color: ' +
        settings.colorRange +
        "; opacity: " +
        settings.rangeOpacity +
        '" >0</span>'
    );

    // Set even spacing in the graph depending on amount of data

    var width = parent.find(".graphiq__graph-layout").width();

    if (settings.xLines) {
      unitLines(width, maxVal);
    }

    layoutGraph(width, true);

    $(window).on("resize", function() {
      pathPoints = "";
      width = parent.find(".graphiq__graph-layout").width();
      layoutGraph(width, false);
    });

    // buildFillPath();

    function percentageOf(max, current) {
      return current / max * 100 * scaleFactor;
    }

    function layoutGraph(width, initial) {
      graph.attr({
        viewBox: "0 0 " + width + " " + (settings.height + 10),
        width: width
      });
      entryDivision = width / (values.length - 1);
      getCoordinates(initial, entryDivision);
    }

    function getCoordinates(initial, entryDivision) {
      for (i = 0; i < values.length; i++) {
        var offset;

        if (i == 0) {
          offset = settings.dotRadius + settings.dotStrokeWeight + 1;
        } else if (i == values.length - 1) {
          offset = (settings.dotRadius + settings.dotStrokeWeight) * -1 - 1;
        } else {
          offset = 0;
        }

        var lineOffset =
          i == values.length - 2
            ? (settings.dotRadius + settings.dotStrokeWeight) / 2
            : 0;

        let nextI = i + 1;
        let xAxis = entryDivision * i + offset;
        let xAxis2 = entryDivision * nextI;

        console.log(offset);

        let yAxis = dataRange - percentageOf(maxVal, values[i]);

        let yAxis2 = dataRange - percentageOf(maxVal, values[nextI]);

        if (i == values.length - 1) {
          yAxis2 = yAxis;
          xAxis2 = xAxis;
        }

        pathPoints += " L " + xAxis + " " + yAxis;

        if (i == values.length - 1 && settings.fill) {
          buildFillPath(pathPoints);
        }

        if (initial) {
          if (settings.yLines) {
            $(document.createElementNS("http://www.w3.org/2000/svg", "line"))
              .attr({
                class: "graphiq__y-division",
                x1: xAxis,
                y1: yAxis,
                x2: xAxis,
                y2: settings.height + 5,
                stroke: settings.colorYGrid,
                "stroke-dasharray": "5 6",
                "stroke-width": 1
              })
              .prependTo(graph);
          }

          // Draw the line

          $(document.createElementNS("http://www.w3.org/2000/svg", "line"))
            .attr({
              class: "graphiq__line",
              x1: xAxis,
              y1: yAxis,
              x2: xAxis2 - lineOffset,
              y2: yAxis2 + settings.dotStrokeWeight / 2,
              stroke: settings.colorLine,
              "stroke-width": settings.lineWeight,
              "vector-effect": "non-scaling-stroke"
            })
            .appendTo(graph);

          // Draw the circle

          $(document.createElementNS("http://www.w3.org/2000/svg", "circle"))
            .attr({
              class: "graphiq__graph-dot",
              cx: xAxis,
              cy: yAxis + settings.dotStrokeWeight / 2,
              r: settings.dots ? settings.dotRadius : 0,
              fill: settings.colorDot,
              stroke: settings.colorDotStroke,
              "stroke-width": settings.dotStrokeWeight,
              "data-value": values[i],
              "vector-effect": "non-scaling-stroke"
            })
            .appendTo(graph);

          // Resize instead of draw, used in resize
        } else {
          parent
            .find(".graphiq__graph-dot")
            .eq(i)
            .attr({
              cx: xAxis
            });
          parent
            .find(".graphiq__line")
            .eq(i)
            .attr({
              x1: xAxis,
              x2: xAxis2 - lineOffset
            });
          parent
            .find(".graphiq__y-division")
            .eq(values.length - i - 1)
            .attr({
              x1: xAxis,
              x2: xAxis
            });
          parent.find(".graphiq__x-line").each(function() {
            $(this).attr({
              x2: width
            });
          });
        }
      }
    }

    function buildFillPath(pathPoints) {
      parent
        .find(".graphiq__fill-path")
        .attr(
          "d",
          "M  " +
            (4 + settings.dotStrokeWeight) +
            " " +
            (settings.height + 5 + settings.dotStrokeWeight) +
            pathPoints +
            " L " +
            (width - settings.dotRadius - settings.dotStrokeWeight) +
            " " +
            (settings.height + 5 + settings.dotStrokeWeight)
        );
    }

    function unitLines(width, maxVal) {
      // Draw the max line

      var iteration = 100 / (settings.xLineCount - 1);

      for (i = 0; i < settings.xLineCount; i++) {
        $(document.createElementNS("http://www.w3.org/2000/svg", "line"))
          .attr({
            class: "graphiq__x-line",
            y1: iteration * i + (settings.dotRadius + settings.dotStrokeWeight),
            x2: width,
            y2: iteration * i + (settings.dotRadius + settings.dotStrokeWeight),
            stroke: settings.colorXGrid,
            // "stroke-dasharray": "5 6",
            "stroke-width": 1
          })
          .prependTo(graph);
      }
    }

    parent.hover(
      function() {
        $(this)
          .find(".graphiq__graph-dot")
          .each(function(index) {
            $("body").append(
              '<span style="color: ' +
                settings.colorUnits +
                '" class="graphiq__value-dialog value-' +
                index +
                '">' +
                $(this).attr("data-value") +
                "</span>"
            );
            $(".value-" + index).css({
              top: $(this).position().top - 8,
              left:
                $(this).position().left -
                $(".value-" + index).outerWidth() / 2 +
                3
            });
          });
      },
      function() {
        $(".graphiq__value-dialog").remove();
      }
    );
  };
})(jQuery);

// Initiate graph

$(".micro-graph").graphiq({
  data: coffees,
  fluidParent: ".little-container",
  height: 36.01,
  xLineCount: 0,
  lineWeight: 1.5,
  dotRadius: 4,
  yLines: false,
  xLines: true,
  dots: false,
  fillOpacity: 0.5,
  fill: false,
  colorUnits: "#c3ecf7"
});

External CSS

  1. https://unpkg.com/blackprint/dist/blackprint.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js