Vue Chart.js - простая точка / линия на гистограмме

Насколько я понимаю, Vue Chart работает с использованием холста (как показано на демонстрационной странице).
Итак я предлагаю получить узел холста, представляющий диаграмму в вашей модели DOM, и динамически записать желаемую точку. Например:

var c = document.getElementById("bar-chart");   //hereby assuming canvas named "bar-chart"
var ctx = c.getContext("2d");
ctx.fillStyle = "#ff0000";                     //red color for the dot
ctx.beginPath();
let yPosition = c.height - 5;                 //fixed y position
let xPosition = 35;                          //that's the dynamic expected value
ctx.arc(xPosition, yPosition, 2.5, 0, 2 * Math.PI);
ctx.fill();

Здесь вы найдете демонстрацию, показывающую, как этого добиться с помощью Vue. В этом сценарии вам нужно обернуть код, чтобы нарисовать точку на холсте в afterDraw крючок. Этот хук нужно прикрепить к компоненту диаграммы как плагин, например:

...
mounted () { 
   //adding the plugin to draw the red dot
   this.addPlugin({
    id: 'chart-plugin',
    afterDraw: function (chart) {
       var c = chart.canvas;   
       var ctx = c.getContext("2d");
       ctx.fillStyle = "#ff0000";                     
       ctx.beginPath();
       let xPosition = 742; //x positioning to be calculated according to your needs
       let yPosition = c.height - 28;                                       
       ctx.arc(xPosition, yPosition, 3, 0, 2 * Math.PI);
       ctx.fill();
    }
  });

  //actual chart rendering
  this.renderChart({ 
    ...
  });
}
...

Для полноты картины здесь вы найдете список всех доступных хуков API плагина Chart.js.

Это мое решение вашей проблемы https://jsfiddle.net/huynhsamha/e54djwxp/

А это скриншот с результатом

В своем решении я использую type="line", а также ось x и ось y с type="linear". Я также добавляю свойство options в <chart> для использования options в ChartJS

<div id="vue">
  <chart type="line" :data="data" :options="options"></chart>
</div>

options настроит ось x и ось y для отображения точек данных и ожидаемого значения:

      options: {
        scales: {
            xAxes: [{
            type: 'linear',
            ticks: {
                min: 1,
                max: 6,
                stepSize: 1
            }
          }],
           yAxes: [{
            type: 'linear',
            ticks: {
                min: 0,
                max: 1,
                stepSize: 0.1
            }
            }]
        }
      }

А у data будет 2 datasets. Первый - это точки данных, используйте тип line, а второй - ожидаемое значение, использующее тип bubble.

      data: {
        datasets: [{
            label: 'Frequency Data',
            data: dataPoints.map(({ val, freq }) => ({
                x: val,
              y: freq
            })),
            backgroundColor: 'rgba(72, 202, 59, 0.4)',
            borderColor: 'rgba(72, 202, 59, 1)'
        }, {
            label: 'Expected Value',
            type: 'bubble',
            data: [{ 
                x: expectedValue, 
              y: 0, 
              r: 8 // radius
            }],
            backgroundColor: 'rgba(255, 68, 0, 0.4)',
            borderColor: 'rgba(255, 68, 0, 1)'
        }]
        },

В datasets у нас есть dataPoints и expectedValue, они будут извлечены из API для получения ваших точек данных. Я также моделирую простой API для точек данных:

// simulate the API to get data points
const retrieveData = () => [
    { val: 1, freq: 0.15 },
    { val: 2, freq: 0.25 },
    { val: 3, freq: 0.3 },
    { val: 4, freq: 0.2 },
    { val: 5, freq: 0.1 },
    { val: 6, freq: 0.45 }
]


// fetch your data here, return array of JSON { val, freg }
const dataPoints = retrieveData() || [];

// calculate expected value = sum( val * freq ) each i in dataPoints
const expectedValue = dataPoints.reduce((cur, { val, freq }) => cur + val * freq, 0).toFixed(4);

Вы можете запустить сниппет или запустить скрипт https://jsfiddle.net/huynhsamha/e54djwxp/92/ < / а>

<script async src="//jsfiddle.net/huynhsamha/e54djwxp/92/embed/js,html,css,result/dark/"></script>