<div id="container-chart"></div> 
#container-chart{
  display: block;
  max-width: 888px;
  height: 556px;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#myChart{
  display: block;
  width: 100%;
  height: 100%;
}

.tooltip {
  font-family: "Helvetica Neue", helvetica, san-serif;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  width: 180px;
}

.tooltip-left {
  width: 100px;
  float: left;
}

.tooltip-heading {
  text-transform: uppercase;
  font-weight: bold;
  width: 100%;
  display: inline-block;
}

.tooltip-category {
  color: #666;
  font-size: 11px;
  width: 100%;
}

.tooltip-rating {
  float: right;
  font-weight: bold;
  font-size: 32px;
  width: 70px;
  text-align: right;
  line-height: 0.9;
}

text,
tspan {
  color: #0085a1 !important;
  fill: #0085a1 !important;
  font-weight: bold;
}
var brewKey = {
  "A": "French Press",
  "B": "Aeropress",
  "C": "Drip",
  "D": "Toddy Cold Brew",
  "E": "Chemex"
}

var categories = [
  'Acidity',
  'Flavor',
  'Body',
  'Aftertaste',
  'Balance'
]

var colors = [
  '#b92235',
  '#3d2471',
  '#fdb337',
  '#21c8d7',
  '#8abe51'
]

var results = [{"Name":"Andy","Sample":"A","Acidity":4,"Flavor":2,"Body":3,"Aftertaste":5,"Balance":2,"Notes":0,"Guess":"Drip","Favorite":0},{"Name":"Andy","Sample":"B","Acidity":2,"Flavor":3,"Body":3,"Aftertaste":2,"Balance":3,"Notes":0,"Guess":"Aeropress","Favorite":0},{"Name":"Andy","Sample":"C","Acidity":1,"Flavor":4,"Body":3,"Aftertaste":2,"Balance":4,"Notes":"Best one, aw yeah!","Guess":"French Press","Favorite":"Y"},{"Name":"Andy","Sample":"D","Acidity":3,"Flavor":3,"Body":3,"Aftertaste":4,"Balance":2,"Notes":0,"Guess":"Cold Brew","Favorite":0},{"Name":"Andy","Sample":"E","Acidity":1,"Flavor":4,"Body":3,"Aftertaste":3,"Balance":3,"Notes":0,"Guess":"Chemex","Favorite":0},{"Name":"Collin","Sample":"A","Acidity":1,"Flavor":4,"Body":4,"Aftertaste":3,"Balance":3,"Notes":0,"Guess":"Aeropress","Favorite":0},{"Name":"Collin","Sample":"B","Acidity":4,"Flavor":3,"Body":2,"Aftertaste":4,"Balance":3,"Notes":"My fav","Guess":"Chemex","Favorite":"Y"},{"Name":"Collin","Sample":"C","Acidity":3,"Flavor":1,"Body":3,"Aftertaste":2,"Balance":2,"Notes":0,"Guess":"Drip","Favorite":0},{"Name":"Collin","Sample":"D","Acidity":2,"Flavor":4,"Body":4,"Aftertaste":4,"Balance":3,"Notes":0,"Guess":"Cold Brew","Favorite":0},{"Name":"Collin","Sample":"E","Acidity":4,"Flavor":4,"Body":2,"Aftertaste":4,"Balance":2,"Notes":0,"Guess":"French Press","Favorite":0},{"Name":"James","Sample":"A","Acidity":2,"Flavor":5,"Body":5,"Aftertaste":2,"Balance":3,"Notes":"Like it. Strong, rich, favorite","Guess":"French Press","Favorite":"Y"},{"Name":"James","Sample":"B","Acidity":5,"Flavor":3,"Body":1,"Aftertaste":5,"Balance":1,"Notes":"Hated it, Really strong aftertaste, but thin.","Guess":"Drip","Favorite":0},{"Name":"James","Sample":"C","Acidity":"N/A","Flavor":3,"Body":4,"Aftertaste":3,"Balance":3,"Notes":0,"Guess":"Aeropress","Favorite":0},{"Name":"James","Sample":"D","Acidity":5,"Flavor":"N/A","Body":2,"Aftertaste":4,"Balance":"N/A","Notes":0,"Guess":"Cold Brew","Favorite":0},{"Name":"James","Sample":"E","Acidity":4,"Flavor":"N/A","Body":"N/A","Aftertaste":3,"Balance":"N/A","Notes":0,"Guess":"French Press","Favorite":0},{"Name":"Gump","Sample":"A","Acidity":3,"Flavor":5,"Body":5,"Aftertaste":4,"Balance":5,"Notes":0,"Guess":"Aeropress","Favorite":"Y"},{"Name":"Gump","Sample":"B","Acidity":5,"Flavor":5,"Body":4,"Aftertaste":4,"Balance":3,"Notes":0,"Guess":"French Press","Favorite":0},{"Name":"Gump","Sample":"C","Acidity":3,"Flavor":4,"Body":5,"Aftertaste":4,"Balance":4,"Notes":0,"Guess":"Drip","Favorite":0},{"Name":"Gump","Sample":"D","Acidity":3,"Flavor":3,"Body":4,"Aftertaste":4,"Balance":4,"Notes":0,"Guess":"Cold Brew","Favorite":0},{"Name":"Gump","Sample":"E","Acidity":5,"Flavor":4,"Body":4,"Aftertaste":2,"Balance":3,"Notes":0,"Guess":"Chemex","Favorite":0},{"Name":"Chris","Sample":"A","Acidity":4,"Flavor":3,"Body":2,"Aftertaste":3,"Balance":2,"Notes":0,"Guess":"Drip","Favorite":0},{"Name":"Chris","Sample":"B","Acidity":3,"Flavor":3,"Body":4,"Aftertaste":4,"Balance":3,"Notes":0,"Guess":"Cold Brew","Favorite":0},{"Name":"Chris","Sample":"C","Acidity":1,"Flavor":3,"Body":4,"Aftertaste":2,"Balance":3,"Notes":"Nutty","Guess":"Aeropress","Favorite":0},{"Name":"Chris","Sample":"D","Acidity":1,"Flavor":4,"Body":4,"Aftertaste":3,"Balance":4,"Notes":"Sweet, Vanilla","Guess":"Chemex","Favorite":0},{"Name":"Chris","Sample":"E","Acidity":"N/A","Flavor":"N/A","Body":"N/A","Aftertaste":"N/A","Balance":"N/A","Notes":"Sugary aftertaste","Guess":"French Press","Favorite":"Y"},{"Name":"Alan","Sample":"A","Acidity":2,"Flavor":4,"Body":2,"Aftertaste":5,"Balance":4,"Notes":"Not aero, french?","Guess":"Chemex","Favorite":0},{"Name":"Alan","Sample":"B","Acidity":4,"Flavor":2,"Body":4,"Aftertaste":2,"Balance":3,"Notes":"Very bitter","Guess":"French Press","Favorite":0},{"Name":"Alan","Sample":"C","Acidity":3,"Flavor":"N/A","Body":"N/A","Aftertaste":"N/A","Balance":"N/A","Notes":0,"Guess":"Aeropress","Favorite":"Y"},{"Name":"Alan","Sample":"D","Acidity":1,"Flavor":4,"Body":2,"Aftertaste":3,"Balance":3,"Notes":0,"Guess":"Drip","Favorite":0},{"Name":"Alan","Sample":"E","Acidity":2,"Flavor":4,"Body":3,"Aftertaste":2,"Balance":3,"Notes":0,"Guess":"Cold Brew","Favorite":0},{"Name":"O'Malley","Sample":"A","Acidity":4,"Flavor":4,"Body":5,"Aftertaste":4,"Balance":5,"Notes":"Chocolate tasting, a bit sour/tangy","Guess":"French Press","Favorite":"Y"},{"Name":"O'Malley","Sample":"B","Acidity":5,"Flavor":3,"Body":4,"Aftertaste":1,"Balance":3,"Notes":"Sour/bitter","Guess":"Cold Brew","Favorite":0},{"Name":"O'Malley","Sample":"C","Acidity":1,"Flavor":3,"Body":3,"Aftertaste":2,"Balance":4,"Notes":"Smooth, more watery","Guess":"Chemex","Favorite":0},{"Name":"O'Malley","Sample":"D","Acidity":5,"Flavor":2,"Body":2,"Aftertaste":3,"Balance":2,"Notes":"Not as strong, floral notes, lighter","Guess":"Drip","Favorite":0},{"Name":"O'Malley","Sample":"E","Acidity":3,"Flavor":4,"Body":4,"Aftertaste":2,"Balance":4,"Notes":"Cocoa, acidic","Guess":"Aeropress","Favorite":0},{"Name":"Peter","Sample":"A","Acidity":5,"Flavor":4,"Body":3,"Aftertaste":3,"Balance":4,"Notes":0,"Guess":"N/A","Favorite":0},{"Name":"Peter","Sample":"B","Acidity":4,"Flavor":4,"Body":3,"Aftertaste":3,"Balance":3,"Notes":"Tart","Guess":"N/A","Favorite":0},{"Name":"Peter","Sample":"C","Acidity":2,"Flavor":3,"Body":4,"Aftertaste":3,"Balance":4,"Notes":"Bland","Guess":"N/A","Favorite":0},{"Name":"Peter","Sample":"D","Acidity":5,"Flavor":3,"Body":2,"Aftertaste":2,"Balance":3,"Notes":0,"Guess":"N/A","Favorite":0},{"Name":"Peter","Sample":"E","Acidity":4,"Flavor":3,"Body":3,"Aftertaste":2,"Balance":2,"Notes":"Little burnt","Guess":"N/A","Favorite":0},{"Name":"Elisabeth","Sample":"A","Acidity":5,"Flavor":2,"Body":3,"Aftertaste":1,"Balance":1,"Notes":"Bitter","Guess":"Drip","Favorite":0},{"Name":"Elisabeth","Sample":"B","Acidity":4,"Flavor":2,"Body":3,"Aftertaste":2,"Balance":2,"Notes":0,"Guess":"French Press","Favorite":0},{"Name":"Elisabeth","Sample":"C","Acidity":4,"Flavor":3,"Body":2,"Aftertaste":3,"Balance":3,"Notes":0,"Guess":"Aeropress","Favorite":0},{"Name":"Elisabeth","Sample":"D","Acidity":3,"Flavor":4,"Body":3,"Aftertaste":4,"Balance":3,"Notes":"Favorite!","Guess":"Cold Brew","Favorite":"Y"},{"Name":"Elisabeth","Sample":"E","Acidity":4,"Flavor":4,"Body":3,"Aftertaste":4,"Balance":4,"Notes":0,"Guess":"Chemex","Favorite":0},{"Name":"Brian","Sample":"A","Acidity":5,"Flavor":3,"Body":3,"Aftertaste":4,"Balance":2,"Notes":0,"Guess":"Drip","Favorite":0},{"Name":"Brian","Sample":"B","Acidity":4,"Flavor":3,"Body":4,"Aftertaste":4,"Balance":2,"Notes":0,"Guess":"Cold Brew","Favorite":0},{"Name":"Brian","Sample":"C","Acidity":1,"Flavor":1,"Body":2,"Aftertaste":2,"Balance":2,"Notes":0,"Guess":"Chemex","Favorite":0},{"Name":"Brian","Sample":"D","Acidity":1,"Flavor":1,"Body":1,"Aftertaste":1,"Balance":2,"Notes":0,"Guess":"French Press","Favorite":"Y"},{"Name":"Brian","Sample":"E","Acidity":3,"Flavor":4,"Body":4,"Aftertaste":2,"Balance":2,"Notes":0,"Guess":"Aeropress","Favorite":0}]

$(function () {

  $('#container-chart').highcharts({

    chart: {
      type: 'line',
      spacingTop: 20,
      spacingBottom: 50
    },

    title: {
      text: '',
      style: {
        display: 'none'
      }
    },

    colors: colors,

    pane: {
      size: '80%'
    },

    xAxis: {
      gridLineColor: '#fff',
      gridLineWidth: 2,
      categories: categories,
      tickmarkPlacement: 'on',
      tickWidth: 0,
      lineWidth: 0,
      labels: {
        y: 30
      }
    },

    yAxis: {
      title: {
        text: 'Average Rating',
        x: -15
      },
      gridLineColor: '#fff',
      gridLineWidth: 0,
      gridLineInterpolation: 'polygon',
      lineWidth: 0,

      tickInterval: 1,
      labels: {
        x: -20
      },
      plotBands: [{
        color: 'rgba(0, 133, 161, 0.11)',
        from: 0,
        to: 1
      },
      {
        color: 'rgba(0, 133, 161, 0.09)',
        from: 1,
        to: 2
      },
      {
        color: 'rgba(0, 133, 161, 0.07)',
        from: 2,
        to: 3
      },
      {
        color: 'rgba(0, 133, 161, 0.05)',
        from: 3,
        to: 4
      },
      {
        color: 'rgba(0, 133, 161, 0.03)',
        from: 4,
        to: 5
      }]
    },

    legend: {
      enabled: true,
      y: 50
    },

    tooltip: {
      useHTML: true,
      headerFormat: '<div class="tooltip">',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      pointFormatter: function() {
        return '<div class="tooltip-left">' +
        '<h3 class="tooltip-heading" style="color: ' + this.color + ';">' + this.series.name + '</h3>' +
        '<p class="tooltip-category">' + this.category + '</p>' +
        '</div>' +
        '<p class="tooltip-rating" style="color: ' + this.color + ';">' + this.y + '</p>';
      },
      footerFormat: '</div>',
      followPointer: true,
      borderWidth: 0,
      shadow: false
    },

    credits: {
      enabled: false
    },

    plotOptions: {
      line: {
        lineWidth: 3,
        marker: {
          enabled: false
        }
      }
    },

    series: _.map(brewKey, function(brewMethod, key) {
      // Filter results down to each brew method
      var resultsForMethod = _.filter(results, function(result) {
        return result.Sample == key;
      });
      var data = [];

      _.each(categories, function(category) {
        // Filter results down to each category
        var valuesForCategory = _.map(resultsForMethod, function(result) {
          if (result[category] == 'N/A') return 1;
          return result[category];
        });

        // Sum the results for each category
        var totalForCategory = valuesForCategory.reduce(function(pv, cv) {
          return pv + cv;
        }, 0);

        // Add an average score for each category
        data.push(totalForCategory / resultsForMethod.length);
      });

      return {
        name: brewMethod,
        data: data
      }
    }),

    navigation: {
      buttonOptions: {
        enabled: false
      }
    }

  });
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
  2. //code.highcharts.com/highcharts.js
  3. //code.highcharts.com/highcharts-more.js
  4. //cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js