<kibana-panel ng-controller='histogram' ng-init="init()" style="height:{{panel.height || row.height}}">
  <span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
      <i bs-modal="'/kibana3/partials/modal.html'" class="icon-eye-open"></i>
  </span>
  <div>
  <span ng-show='panel.zoomlinks && data'>
    <a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>
    <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> | 
  </span>
  <span ng-show="panel.legend" ng-repeat='series in plot.getData()' style='display:inline-block;padding-right:5px'>
    <div style="display:inline-block;background:{{series.color}};height:10px;width:10px;border-radius:5px;"></div>
    <div class='small' style='display:inline-block'>{{series.label}} ({{series.hits}})</div>
  </span>
  <span ng-show="panel.legend" class="small"><span ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span>
  </div>
  <center><img ng-show='panel.loading && _.isUndefined(data)' src="/kibana3/common/img/load_big.gif"></center>
  <div histogram-chart params="{{panel}}" style="height:{{panel.height || row.height}};position:relative"></div>
</kibana-panel>         
