chartjs timeline with images

Solutions on MaxInterview for chartjs timeline with images by the best coders in the world

showing results for - "chartjs timeline with images"
Laure
27 Aug 2020
1<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
2<canvas id="chart" height="28"></canvas>
Silvana
21 Jun 2017
1const img = new Image(16, 16);
2img.src = 'https://i.stack.imgur.com/Q94Tt.png'; 
3
4var ctx = document.getElementById('chart').getContext('2d');
5var myChart = new Chart(ctx, {
6  type: 'line',
7  data: {
8    datasets: [{
9      data: [
10        { x: "2020-03-22", y: 0 },
11        { x: "2020-04-01", y: 0 },
12        { x: "2020-04-02", y: 0 },
13        { x: "2020-04-03", y: 0 },
14        { x: "2020-04-08", y: 0 },
15        { x: "2020-04-12", y: 0 },
16        { x: "2020-04-15", y: 0 }
17      ],
18      pointStyle: img,
19      borderWidth: 1
20    }]
21  },
22  options: {
23    legend: {
24      display: false
25    },
26    scales: {
27      yAxes: [{
28        ticks: {
29          display: false,
30        },        
31        gridLines: {
32          display: false
33        }
34      }],
35      xAxes: [{
36        type: 'time',
37        time: {
38          unit: 'day',
39          tooltipFormat: 'MMM DD'
40        },
41        gridLines: {
42          display:false
43        }
44      }]
45    }
46  }
47});