chart.jsで線グラフを作成する方法を知りたい

javascript

1 function createChartConfig(ctx) {2 return {3 type: "line",4 data: {5 labels: ["CP", "NP", "A", "FC", "AC"], // X-axis labels6 datasets: [7 {8 label: "My Dataset", // Dataset label9 data: [35, 60, 40, 55, 85], // Y-axis data points10 backgroundColor: "rgba(135, 206, 250, 0.2)", // Background color of the line area11 borderColor: "rgba(0, 0, 255, 1)", // Border color of the line12 borderWidth: 3, // Border width of the line13 pointBackgroundColor: "rgba(0, 0, 255, 1)", // Color of the points14 pointBorderColor: "#fff", // Border color of the points15 pointBorderWidth: 2, // Border width of the points16 pointRadius: 5, // Radius of the points17 fill: false, // Fill area under the line18 tension: 0.1, // Bezier curve tension19 borderDash: [6, 6],20 },21 ],22 },23 options: {24 responsive: true,25 26 scales: {27 y: {28 type: "linear",29 borderDash: [8, 4],30 31 min: 0,32 max: 100,33 ticks: {34 stepSize: 5,35 },36 gridLines: {37 // You can change the color, the dash effect, the main axe color, etc.38 borderDash: [8, 4],39 color: "#348632",40 },41 },42 xAxes: [43 {44 gridLines: {45 // You can change the color, the dash effect, the main axe color, etc.46 borderDash: [8, 4],47 color: "#348632",48 },49 },50 ],51 },52 plugins: {53 borderColor: "red",54 borderWidth: 2,55 borderDash: [5, 5],56 borderDashOffset: 2,57 },58 layout: {59 padding: {60 // Add padding to avoid cutting61 top: 10,62 right: 10,63 bottom: 10,64 left: 10,65 },66 },67 elements: {68 line: {69 borderWidth: 2, // Border width of the line70 },71 point: {72 radius: 5, // Radius of the points73 },74 },75 },76 };77 }