asp.net mvc chart.js c# example
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <!--<link href="../Content/bootstrap.min.css" rel="stylesheet" />-->
7 <script src="../Scripts/Chart.min.js"></script>
8 </head>
9 <body>
10 <canvas id="myChart"></canvas>
11
12 <script>
13 var ctx = document.getElementById("myChart");
14 var chart = new Chart(ctx, {
15 type: "line",
16 data: {
17 labels: ['1 month', '2 month', '3 month', '4 month', '5 month', '6 month'],
18 datasets: [{
19 label: "Taipei",
20 fill: false,
21 backgroundColor: 'rgba(255,165,0,0.3)',
22 borderColor: 'rgb(255,135,20)',
23 pointStyle: "circle",
24 pointBackgroundColor: 'rgb(0,222,0)',
25 pointRadius: 5,
26 pointHoverRadius: 10,
27 data: [13.1, 10.2, 13.5, 20.9, 25.2, 27.1, 31.8]
28 }, {
29 label: "Kaohsiung",
30 fill: false,
31 backgroundColor: 'rgba(0,255,255,0.3)',
32 borderColor: 'rgb(0,225,255)',
33 pointStyle: "triangle",
34 pointBackgroundColor: 'blue',
35 pointRadius: 5,
36 pointHoverRadius: 10,
37 data: [29.1, 28.3, 22.6, 25.4, 27.5, 23.4]
38
39 }, {
40 label: "Vietnam?",
41 fill: false,
42 backgroundColor: 'rgba(153,50,204,0.3)',
43 borderColor: 'rgb(123,55,190)',
44 pointStyle: "rect",
45 pointBackgroundColor: 'rgb(220,20,60)',
46 pointRadius: 5,
47 pointHoverRadius: 10,
48 data: [16.6, 17.3, 19.2, 23.8, 12.0, 17.6]
49
50 }]
51 },
52 options: {
53 responsive: true,
54 title: {
55 display: true,
56 fontSize: 26,
57 text: '2019 Annual Branch 1 - 6 Monthly turnover'
58 },
59 tooltips: {
60 mode: 'point',
61 intersect: true,
62 },
63 hover: {
64 mode: 'nearest',
65 intersect: true
66 },
67 scales: {
68 xAxes: [{
69 display: true,
70 scaleLabel: {
71 display: true,
72 labelString: 'Month',
73 fontSize: 15
74 },
75 ticks: {
76 fontSize: 15
77 }
78 }],
79 yAxes: [{
80 display: true,
81 scaleLabel: {
82 display: true,
83 labelString: 'Million(dollar)',
84 fontSize: 15
85 },
86 ticks: {
87 fontSize: 15
88 }
89 }]
90 },
91 animation: {
92 duration: 2000
93 }
94 }
95 });
96 </script>
97 </body>
98 </html>