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

実現したいこと

画像のようなチャートをchart.jsで再現したい

↑実現したいイメージ

↑現在のコードで実現できている図

前提

フロントエンドの開発をしています。chart.jsで画像のようなグラフを作成したいです。

発生している問題・エラーメッセージ

以下の部分がどうすればいいか分からないです。

背景のグリッドを点線にする方法
x軸の目盛りの'CP'をy軸の目盛りのところと重なったところから始めるのではなくて、右に少しずらしたところから始めること
外枠を黒い実線で囲むこと

該当のソースコード

javascript
1  function createChartConfig(ctx) {
2        return {
3          type: "line",
4          data: {
5            labels: ["CP", "NP", "A", "FC", "AC"], // X-axis labels
6            datasets: [
7              {
8                label: "My Dataset", // Dataset label
9                data: [35, 60, 40, 55, 85], // Y-axis data points
10                backgroundColor: "rgba(135, 206, 250, 0.2)", // Background color of the line area
11                borderColor: "rgba(0, 0, 255, 1)", // Border color of the line
12                borderWidth: 3, // Border width of the line
13                pointBackgroundColor: "rgba(0, 0, 255, 1)", // Color of the points
14                pointBorderColor: "#fff", // Border color of the points
15                pointBorderWidth: 2, // Border width of the points
16                pointRadius: 5, // Radius of the points
17                fill: false, // Fill area under the line
18                tension: 0.1, // Bezier curve tension
19                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 cutting
61                top: 10,
62                right: 10,
63                bottom: 10,
64                left: 10,
65              },
66            },
67            elements: {
68              line: {
69                borderWidth: 2, // Border width of the line
70              },
71              point: {
72                radius: 5, // Radius of the points
73              },
74            },
75          },
76        };
77      }