Plotly Custom Icons

by b9chris

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="graph"></div>

SCSS

#graph div.modebar a[data-attr=download] {
  svg path {
    fill: none;
    stroke: #888;

  &:hover {
    fill: none;
    stroke: #000;
  }
}

JavaScript

var plotlyConfig = {
	displaylogo: false,
  responsive: true,
  displayModeBar: true,	// Never hide icons
  modeBarButtons: [
  	[
      {
        name: 'download',
        attr: 'download',
        title: 'Download as Image',
        icon: {
          width: 10, height: 10,
          path: 'M5,1 L5,8 L2,5 L5,8 L8,5 M2,9 L8,9'
        },
        click: onClickDownloadImage
      }
  	],
    ['zoom2d', 'pan2d', 'select2d', 'lasso2d', 'zoomIn2d', 'zoomOut2d']
  ]
};

function onClickDownloadImage(gd) {
  Plotly.downloadImage(gd, {
    filename: 'graph', format: 'png', width: 920, height: 450
  });
  
  // Change the icon just to be cheeky
  var buttonPath = $('#graph div.modebar a[data-attr=download] svg path');
  buttonPath.attr('d', 'M1,5 L5,9 L9,1').css({'stroke': '#0c0'});
};


function runGraph(config) {
  var lp = ['HH-LE-123','HH-LE-124','HH-LE-125','HH-LE-126','HH-LE-127','HH-LE-128','HH-LE-129','HH-LE-130','HH-LE-131','HH-LE-132','HH-LE-133','HH-LE-134','HH-LE-135','HH-LE-136','HH-LE-137','HH-LE-138','HH-LE-139','HH-LE-140','HH-LE-141','HH-LE-142','HH-LE-143','HH-LE-144','HH-LE-145','HH-LE-146','HH-LE-147','HH-LE-148','HH-LE-149','HH-LE-150','HH-LE-151','HH-LE-152'];

  var dates = [new Date('01-01-2018'),new Date('01-01-2018'),new Date('01-01-2018'),new Date('01-01-2018'),new Date('01-01-2018'),new Date('01-03-2018'),new Date('01-03-2018'),new Date('01-03-2018'),new Date('01-03-2018'),new Date('01-03-2018'),new Date('01-07-2018'),new Date('01-07-2018'),new Date('01-07-2018'),new Date('01-07-2018'),new Date('01-08-2018'),new Date('01-08-2018'),new Date('01-08-2018'),new Date('01-08-2018'),new Date('01-08-2018'),new Date('01-08-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-10-2018'),new Date('01-12-2018'),new Date('01-12-2018')];

  var dates_unique = [new Date('01-01-2018'),new Date('01-03-2018'),new Date('01-07-2018'),new...