energylink/src/app/panels/graphite/legend.html

<span ng-show="panel.legend"
      ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
      ng-repeat='series in legend'
      class="histogram-legend">
    <i  class='icon-minus pointer'
        ng-style="{color: series.color}"
        bs-popover="'colorPopup.html'"
        data-unique="1"
        data-placement="{{series.yaxis === 2 ? 'bottomRight' : 'bottomLeft'}}">
    </i>
    <span class='small histogram-legend-item'>
      <a ng-click="toggleSeries(series)">
        {{series.alias}}
      </a>
    </span>
</span>

<script type="text/ng-template" id="colorPopup.html">
  <div class="histogram-legend-popover">
    <div class="histogram-legend-popover-header">
      <a class="close" ng-click="dismiss();" href="">×</a>
    </div>

    <div class="editor-row">
      <a class="small" ng-click="toggleYAxis(series)">
        2:nd Y-axis (y&sup2;) <input type="checkbox"></input>
      </a>
    </div>

    <div class="editor-row">
      Fill style <select class="input-mini" ng-model="panel.aliasFillStyle[series.alias]" ng-options="f for f in ['no', 'all', 'null']" ng-change="get_data()"></select>
    </div>

    <div class="editor-row">
      <i ng-repeat="color in colors"
        class="pointer"
        ng-class="{'icon-circle-blank': color === series.color,'icon-circle': color !== series.color}"
        ng-style="{color:color}"
        ng-click="changeSeriesColor(series, color);dismiss();">
      </i>
    </div>
  </div>
</script>