Jump to content

TUniHTMLFrame + mouseEvents?


Recommended Posts



I am using Chart.js + zoom plugin to it with TUniHTMLFrame and I have strange behaviour. When I add chart to TUniHTMLFrame.HTML the Chart doesn't respond for mouse scroll and for left click and dragging.


Zoom plugin to chart.js allows to make zoom on chart using two methods: either mouse scroll either mouse click and drag. But it doesn't work from uniGUI. When I make an test html file and open it in webrowser it works. Mouse hoover on chart works ok.


In my application TUniHTMLFrame is on then panel and the panel is on the frame - maybe it matters?


I use newest trial version and I have checked it with Edge and Chrome.


Please help :)


Below is the test HTML. 


      .chart-container {
        position: relative;
        margin: auto;
        height: 95%;
        width: 95%;
        -moz-user-select: none;
        webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      <script type="text/javascript" src="Chart.bundle.min.js"></script>
      <script type="text/javascript" src="chartjs-plugin-zoom.min.js"></script>
      <div class="chart-container">
        <canvas id="myChart"></canvas>
  var myChart = new Chart(document.getElementById("myChart"), {
    type: "bar",
    data: {
      labels: ["0","1"],
      datasets: [
          backgroundColor: "#FF704D",
          label: "P+ [kW]",
          data: [1,2]
          backgroundColor: "#98E698",
          label: "P- [kW]",
          data: [1,2]
          backgroundColor: "#4d94ff",
          label: "Q+ [kvar]",
          data: [1,2]
          backgroundColor: "#990099",
          label: "Q- [kvar]",
          data: [1,2]
    options: {
      responsive: true,
      maintainAspectRatio: false,
      pan: {
        enabled: true,
        mode: "xy"
      zoom: {
        enabled: true,
        mode: "xy"
      tooltips: {
        mode: "index",
        intersect: true
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
        xAxes: [{
          ticks: {
      legend: {
        onClick: function(event, item) {
          var index = item.datasetIndex;
          var ci = this.chart;
          var meta = ci.getDatasetMeta(index);
          meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
  function drawChartData(newData){
  myChart.data = newData;





Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...