<templates>
  <t t-name="o-spreadsheet-ZoomableChartJsComponent">
    <div class="w-100 h-100" t-att-style="this.canvasStyle">
      <div t-att-style="this.containerStyle">
        <canvas class="o-figure-canvas w-100 h-100" t-ref="this.canvas"/>
      </div>
      <div
        t-if="this.sliceable"
        class="o-master-chart-container m-0"
        t-att-style="this.masterChartContainerStyle">
        <canvas
          class="o-figure-canvas o-master-chart-canvas w-100 h-100"
          t-ref="this.masterChartCanvas"
          t-on-dblclick="this.onMasterChartDoubleClick"
          t-on-pointerdown="this.onMasterChartPointerDown"
          t-on-pointermove="this.updateMasterChartCursor"
          t-on-mouseleave="this.onMasterChartMouseLeave"
        />
      </div>
    </div>
  </t>
</templates>
