Show tooltips (wrong type)

by codingmi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

<!-- 
function createTooltipItem(element) {
                var xScale = element._xScale;
                var yScale = element._yScale || element._scale; // handle radar || polarArea charts
                var index = element._index;
                var datasetIndex = element._datasetIndex;
                var controller = element._chart.getDatasetMeta(datasetIndex).controller;
                var indexScale = controller._getIndexScale();
                var valueScale = controller._getValueScale();

                return {
                  xLabel: xScale ? xScale.getLabelForIndex(index, datasetIndex) : '',
                  yLabel: yScale ? yScale.getLabelForIndex(index, datasetIndex) : '',
                  label: indexScale ? '' + indexScale.getLabelForIndex(index, datasetIndex) : '',
                  value: valueScale ? '' + valueScale.getLabelForIndex(index, datasetIndex) : '',
                  index: index,
                  datasetIndex: datasetIndex,
                  x: element._model.x,
                  y: element._model.y
                };
              },

-->

JavaScript

var ctx = document.getElementById('myChart').getContext('2d')
          Chart.plugins.register({
	beforeRender: function(chart) {
		if (chart.config.options.showAllTooltips) {
			// create an array of tooltips
			// we can't use the chart tooltip because there is only one tooltip per chart
			chart.pluginTooltips = [];
			chart.config.data.datasets.forEach(function(dataset, i) {
				chart.getDatasetMeta(i).data.forEach(function(sector, j) {
					chart.pluginTooltips.push(
						new Chart.Tooltip(
							{
								_chart: chart.chart,
								_chartInstance: chart,
								_data: chart.data,
								_options: chart.options.tooltips,
								_active: [sector]
							},
							chart
						)
					);
				});
			});

			// turn off normal tooltips
			chart.options.tooltips.enabled = false;
		}
	},
	afterDraw: function(chart, easing) {
		if (chart.config.options.showAllTooltips) {
			// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
			if (!chart.allTooltipsOnce) {
				if (easing !== 1) return;
				chart.allTooltipsOnce = true;
			}

			// turn on tooltips
			chart.options.tooltips.enabled = true;
			Chart.helpers.each(chart.pluginTooltips, function(tooltip) {
				tooltip.initialize();
				tooltip._options.mode = 'index';
//			  tooltip._options.position = 'average';
				tooltip.update();
				// we don't actually need this since we are not animating tooltips
				tooltip.pivot();
				tooltip.transition(easing).draw();
			});
			 chart.options.tooltips.enabled = false;
		}
	}
});

          var myChart = new Chart(ctx, {
            type: 'line',
            data: {
              labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
              datasets: [{
                label: 'Votre portefeuille',
                data: [2, 3, 4, 5, 6, 7, , , , ],
                backgroundColor: 'rgba(17, 43, 55, 1)',
                borderColor: 'rgba(17, 43, 55, 1)',
                pointRadius: [0, 0, 0, 0, 0, 3, 0, 0, 0, 3],
        ...