DevToolBox

📊 SVG棒グラフジェネレーター

データを入力してSVG形式の棒グラフを生成できます

データエントリー

January: 65
February: 59
March: 80
April: 81

スタイル設定

プレビュー

January 65 February 59 March 80 April 81 Month Value

SVGコード

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400">
  <!-- Background -->
  <rect width="600" height="400" fill="white"/>

  <!-- Y Axis -->
  <line x1="60" y1="40" x2="60" y2="340" stroke="#333" stroke-width="2"/>

  <!-- X Axis -->
  <line x1="60" y1="340" x2="560" y2="340" stroke="#333" stroke-width="2"/>

  <!-- Bars -->
  <rect x="200" y="99.25925925925927" width="40" height="240.74074074074073" fill="#3b82f6"/>
  <text x="220" y="360" text-anchor="middle" font-size="12" fill="#333">January</text>
  <text x="220" y="94.25925925925927" text-anchor="middle" font-size="11" fill="#666">65</text>
  <rect x="260" y="121.48148148148147" width="40" height="218.51851851851853" fill="#3b82f6"/>
  <text x="280" y="360" text-anchor="middle" font-size="12" fill="#333">February</text>
  <text x="280" y="116.48148148148147" text-anchor="middle" font-size="11" fill="#666">59</text>
  <rect x="320" y="43.703703703703695" width="40" height="296.2962962962963" fill="#3b82f6"/>
  <text x="340" y="360" text-anchor="middle" font-size="12" fill="#333">March</text>
  <text x="340" y="38.703703703703695" text-anchor="middle" font-size="11" fill="#666">80</text>
  <rect x="380" y="40" width="40" height="300" fill="#3b82f6"/>
  <text x="400" y="360" text-anchor="middle" font-size="12" fill="#333">April</text>
  <text x="400" y="35" text-anchor="middle" font-size="11" fill="#666">81</text>

  <!-- Axis Labels -->
  <text x="300" y="390" text-anchor="middle" font-size="14" fill="#333" font-weight="bold">Month</text>
  <text x="20" y="200" text-anchor="middle" font-size="14" fill="#333" font-weight="bold" transform="rotate(-90 20 200)">Value</text>
</svg>