CEE Brand Signature - with icons

by Danielle Parkinson

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

#container {
	margin: 0 auto;
  height: 425px;
  width: 865px;
}

JavaScript

/**
   * Highcharts snippet/plugin for adding images to axis labels
   */
   
  (function (H) {
      var iconSize = 32;

      H.wrap(H.Tick.prototype, 'renderLabel', function addImages(proceed) {

          proceed.apply(this, [].slice.call(arguments, 1));

          var tick = this,
              axis = this.axis,
              image = axis.options.images && axis.options.images[this.pos],
              xy = this.label && this.label.xy;


          if (image && xy) {

              // xy is bottom center of the label. Put the image to the right.
              xy.x -= - 20;
              xy.y -= (iconSize + this.label.getBBox().height) / 2 -2;

              if (!tick.image) {
                  tick.image = axis.chart.renderer.image(image, xy.x, xy.y, iconSize, iconSize)
                      .add();
              } else { // Update existing
                  tick.image.animate({
                      x: xy.x,
                      y: xy.y
                  });
              }
          }
      });
  }(Highcharts));

Highcharts.chart('container', {
  chart: {
    type: 'line',
    inverted: true,
    /*backgroundColor: '#e5e5e5'*/
  },

  title: {
    text: ' '
  },

  subtitle: {
    text: ' '
  },

  credits: {
    enabled: false
  },

  xAxis: {
    categories: ['Personalisation', 'Integrity', 'Expectations', 'Time & Effort', 'Resolution', 'Empathy'],
		/*tickmarkPlacement: 'top',*/
    images: [
      'https://www.highcharts.com/samples/graphics/sun.png',
      'https://www.highcharts.com/samples/graphics/snow.png',
      'https://www.highcharts.com/samples/graphics/sun.png',
      'https://www.highcharts.com/samples/graphics/snow.png',
      'https://www.highcharts.com/samples/graphics/sun.png',
       'https://www.highcharts.com/samples/graphics/snow.png'
    ],

    labels: {
      x: -75,
      style: {
        fontFamily: 'Arial',
        fontWeight: 'normal',
        fontSize: '14px',
        color: '#333',
      },
    },
  },

  yAxis: {
    min:...