{{#if @dataset}}
  <svg
    data-test-vertical-bar-chart
    class="chart has-grid"
    {{on "mouseleave" this.removeTooltip}}
    {{did-insert this.renderChart @dataset}}
    {{did-update this.renderChart @dataset}}
  >
  </svg>
{{else}}
  <EmptyState @title={{@noDataTitle}} @subTitle={{or @noDataMessage "No data to display"}} @bottomBorder={{true}} />
{{/if}}

{{! TOOLTIP }}

{{#if this.tooltipTarget}}
  {{! Required to set tag name = div https://github.com/yapplabs/ember-modal-dialog/issues/290 }}
  {{! Component must be in curly bracket notation }}
  {{! template-lint-disable no-curly-component-invocation }}
  {{#modal-dialog
    tagName="div"
    tetherTarget=this.tooltipTarget
    targetAttachment="bottom middle"
    attachment="bottom middle"
    offset="10px 0"
  }}
    <div class="chart-tooltip vertical-chart">
      <p>{{this.tooltipTotal}}</p>
      <p>{{this.entityClients}}</p>
      <p>{{this.nonEntityClients}}</p>
    </div>
    <div class="chart-tooltip-arrow"></div>
  {{/modal-dialog}}
{{/if}}