Tooltip sobrepor o gráfico - resolvido

Front-end
#1

Como fazer este tooltip sobrepor o gráfico ?
image

css

#pieRequisicao {
  height: 440px;
}
.tooltip-header {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 5px;
  border-bottom: 1px solid #c5c5c5;
}
.tooltip-body {
  width: 170px;
}
.tooltip-body .series-name {
  font-weight: normal;
  opacity: 0.6;
  display: inline-block;
  line-height: 1.5;
  padding-right: 10px;
  width: 126px;
}
.tooltip-body .value-text {
  display: inline-block;
  line-height: 1.5;
  width: 30px;
}

html

<dx-pie-chart
        id="pieRequisicao"
        type="doughnut"
        [title]="tituloRequisicao"
        [dataSource]="dataRequisicao"
      >
        <dxo-legend
          horizontalAlignment="center"
          verticalAlignment="bottom"
        ></dxo-legend>
        <dxo-export [enabled]="true"></dxo-export>
        <dxi-series argumentField="label" valueField="value">
          <dxo-label
            [visible]="true"
            format="fixedPoint"
            [customizeText]="customizeLabel"
          >
            <dxo-connector [visible]="true" [width]="1"></dxo-connector>
          </dxo-label>
        </dxi-series>
        <dxo-tooltip
          [enabled]="true"
          [customizeTooltip]="customizeTooltip"
          format="millions"
        >
        </dxo-tooltip>
      </dx-pie-chart>

ts

customizeTooltip = (arg: any) => {
    return {
      html:
        '<div><div class="tooltip-header">' +
        arg.argumentText +
        '</div>' +
        "<div class='tooltip-body'><div class='series-name'>" +
        "<span class='top-series-name'>" +
        this.pipe.transform(arg.percent, '1.2-2') +
        '</span>' +
        '</div></div></div>',
    };
  };

Este é o exemplo. https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/Doughnut/Angular/Light/

No styles do angular.json, tenho isso: “node_modules/devextreme/dist/css/dx.light.css”,

O que está errado ?
O que falta ?

#2

tenta adicionar um z-index nesse tooltip aí, dei uma breve olhada aqui e a classe é a: dxc-tooltip.

exemplo:

.dxc-tooltip {
  z-index: 9999;
}

obs: não é legal setar um numero tão grande como 9999, a ideia do zindex é utilizar camadas: ...-2, -1, 0, 1, 2..., em alguns casos é necessário, ve se vai com um numeros baixos, se não, apela pra ele q vai dar certo

2 curtidas
#3

Não funcionou

#4

po, que vago. mostra como vc fez ao menos

1 curtida
#5

Fiz como vc disse

no scss

#pieRequisicao {
  height: 440px;
}
.tooltip-header {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 5px;
  border-bottom: 1px solid #c5c5c5;
}
.tooltip-body {
  width: 170px;
}
.tooltip-body .series-name {
  font-weight: normal;
  opacity: 0.6;
  display: inline-block;
  line-height: 1.5;
  padding-right: 10px;
  width: 126px;
}
.tooltip-body .value-text {
  display: inline-block;
  line-height: 1.5;
  width: 30px;
}
.dxc-tooltip {
  z-index: 9999;
}
#6

Funcionou, fazendo assim:

::ng-deep .dxc-tooltip {
  z-index: 9999;
}

Valeu @rodriguesabner

image
image.png1556×569 34.7 KB

1 curtida
#7

o que é ng-deep?

#8

https://angular.io/guide/component-styles