Tooltip not showing on Vue echarts

Question

I have a simple line chart built using vue-echarts, it works fine but I want to show a tooltip on each white dot on hover: https://i.sstatic.net/ik4nH.jpg

and for some reason the tooltip does not show when I hover on the dots, despite the fact that I have added it as a property to my configuration. Why and how can I make my tooltip show? Here is my code:

       <div class="chart-wrapper">
          <chart  :options="chartOptionsLine "></chart>
        </div>
</script>

and my js:

<script>
export default {
  name: "BalanceCard",
  props: ["title", "heading"],
  data() {
    return {
      chartOptionsLine: {
        xAxis: {
          data: [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31"
          ]
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: function(value) {
              return value / 1000 + "k";
            }
          }
        },
        series: [
          {
            type: "line",
            data: [
              10000,
              5000,
              1000,
              800,
              7000,
              6000,
              9000,
              7,
              9,
              900,
              120,
              170,
              670,
              7000,
              20
            ]
          }
        ],

        color: ["#76B1C5"]
      },
        tooltip: {
          show: true,
          trigger: 'item',
          },
    };
  }
};

Answer 1

See left margin, you inserted tooltip into zero level, i.e out of scope.

Change to below and will work:

var myChart = echarts.init(document.getElementById('chart'));

var option = {
  xAxis: {
    data: [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
      "9",
    ]
  },
  yAxis: {
    type: "value",
    axisLabel: {
      formatter: function(value) {
        return value / 1000 + "k";
      }
    }
  },
  series: [{
    type: "line",
    data: [10000, 5000, 1000, 800, 7000, 6000, 9000, 7, 9]
  }],
  color: ["#76B1C5"],
  tooltip: {
    show: true,
    trigger: 'item',
  }
};

myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:400px;"></div>