Modal fica por trás dos elementos

Front-end
#1

galera por algum motivo a modal está abrindo por trás dos meus gráficos. alguém sabe como contornar?
galera esse é o html…

<button onclick="modal()">teste</button>
<div class="modal fade" id="ModalClinica" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog" >
            <div class="modal-content">
              <div class="modal-header bg-info">
                <h4 class="modal-title " id="myModalLabel">Clínica - Selecione a Clínica</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              </div>
              <div class="modal-body">
                <div id="create_event_alert"></div>
                <form id="create_event_frm"  action="{{route('event')}}"  method="post" enctype="multipart/form-data"  >
                    {{ csrf_field() }}
                  <div class="row">
                    <div class="col-lg-12 col-xs-12">
                      <div class="form-group">
                        <label for="paciente">Clínica</label>
                        <select  class="form-control mb-2" id="clinica" name="clinica" >
                          <option value="">--</option>
                        </select>  
                      </div>
                    </div>
                  </div>

                  <div class="section modal-footer">
                    <div  class="text-right" id="event_image_error_msg"></div>
                    <p class="text-right">
                        <button type="button" id="create_event_btn"  class="btn btn-primary">Salvar</button>
                         <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    </p>
                  </div>
                  <!-- end section row -->
                </form>
              </div>
          </div>  
        </div>
        </div>
#2

Verifique o z-index dos gráficos, provavelmente está maior que o do modal, fazendo com que eles fiquem por cima.

Abraço.

#3

Você está usando bootstrap 4? No 4 para chamar o modal eu faço assim:

<a class=btn btn-primary" data-toggle="modal" data-target="#ModalClinica" href="#">teste</a>