Поместите точку поверх диаграммы, используя plotly js и vue

Question

Я пытаюсь разместить точку над прямоугольным графиком, однако моя попытка приводит к тому, что точка помещается рядом с прямоугольным графиком:

 data: [
        {
          x: [1, 2, 3, 4, 4, 4, 8, 9, 10],
          type: "box",
          name: "Set 1"
        },
        {
          x: [5],
          name: 'My special marker',
          text: 'Some really interesting hover info',
          marker: {
            size: 5
          }
        },
      ],
      layout: {
        title: 'Revenues',
        font:{
        size:10
        },
        margin: {
          l: 0,
          r: 0,
          b: 15,
          t: 25,
          pad: 0
        },
        height: 90,
        dragmode: "pan"
      },

Можно ли разместить эту точку над прямоугольным графиком с использованием библиотеки vue-plotly?

Здесь я воссоздал проблему: https://codesandbox.io/s/vue-plotly-delsw?file= / src / App. vue

EDIT: для желаемого результата мне нужно, чтобы эта дополнительная точка была сверху диаграммы следующим образом:

Answer 1

Одно из решений - установить size маркера точки и width полосы так, чтобы они перекрывали друг друга. Например:

      data: [
        {
          x: [1, 2, 3, 4, 4, 4, 8, 9, 10],
          type: "box",
          name: "Set 1",
          width: 30,
        },
        {
          x: [5],
          name: "My special marker",
          text: "Some really interesting hover info",
          marker: {
            size: 30
          }
        }
      ],