Наведите указатель мыши JS и ошибка массива в строку

Question

Я получаю данные из API, структурирую их и готовлю к отправке в JS с запросом ajax и выводу этих данных. Все работает нормально, пока я не добавлю одну линию, которая показывает детали при наведении на линейный график. Ошибка, которую я получаю в php, заключается в преобразовании массива уведомлений в строку. Еще одна возможность - добавить одну строку в объект данных, которую я получаю в JS, но я тоже не смог этого сделать.

Вы можете увидеть соответствующий код ниже:

Plotly js веб-сайт показывает это так:

   var data = [
    {

    x: [1,2,3,4,5],
    y: [2.02825,1.63728,6.83839,4.8485,4.73463],
    type: 'scatter',
    hovertemplate: '<i>Price</i>: $%{y:.2f}' +
                    '<br><b>X</b>: %{x}<br>'

},

Мой PHP код:

    $data = [ [
        "x" => $this->x,
        "y" => $this->y,
        "type" => "scatter",

         //below here is that one line that causes problem, In js it should look exactly like Plotly example
        "hovertemplate" => '<i>Price</i>: %{'.$this->y.':.2f}<br><b>Date</b>: %{'.$this->x.'}<br>'     

    ] ];
    $out = json_encode($data); 
    echo "{$out}";

Когда я делаю print_r ($ data), он показывает правильные x: и y: но я получаю две ошибки (массив в строку ....), и в конце строки он показывает это:

[hovertemplate] => price: %[Array]
Date: %[Array]

Как я могу исправить эту проблему?