Пользовательская метка с использованием отдельного массива в диаграмме JS

Question

В моем проекте я использую Chart.JS, чтобы показать линейную диаграмму.

Сейчас подсказке на графике показывает, как

Дата: 01/02/2016

Цена: 50

Эти данные получают из двух массивов. Но мне нужно показать еще одну информацию ниже цены. Таким образом, подсказка будет как

Дата: 01/02/2016

Цена: 50

Магазин: Магазин Имя

Как я могу добиться этого в Chart JS? Или это возможно с какой-то другой диаграммой? Пожалуйста помоги. Мой пример кода для генерации графа

var myLineChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    labels: data.day, 
    datasets: [{ 
     label: 'Price Change', 
     data: data.price, 
     backgroundColor: "rgba(255,255,255,0.4)", 
     borderColor: "rgba(0, 183, 255,0.4)", 
     pointRadius: 5, 
     pointBorderColor: "rgba(255,0,0,0.4)", 
     pointBackgroundColor: "rgba(255,0,0,0.4)", 
    }] 
    }, 
    options: { 
     tooltips: { 
      enabled: true, 
      mode: 'single', 
      callbacks: { 
       label: function(tooltipItems, data) { 
        return 'Price: '+tooltipItems.yLabel; 
       } 
      } 
     } 
    } 
    }); 

В приведенном выше коде data.price хранит массив цен. Мне нужно передать данные магазина вместе с ним и показать его в подсказке.

Answer 1

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

, например:

callbacks: { 
    label: function(tooltipItem, data) { 
     var firstTooltip = "toolTipsIdx: " + tooltipItem.index; 
     var otherTooltip = "Ylabel value: " + tooltipItem.yLabel; 
     var tooltip = [firstTooltip, otherTooltip]; //storing all the value here 
     return tooltip; //return Array back to function to show out 
    } 
}