Chart.js Theme

ธีมนี้ทำให้กราฟทุกตัวในงานดิจิทัลของ B.Grimm ดูสม่ำเสมอ สะอาด และ minimal — เลือก ชนิดกราฟ ก่อนที่ Chart Selection Rules แล้วจึงใช้ธีมนี้กับสี/ฟอนต์

Library Loading

ต้อง pin เวอร์ชันเสมอ ห้ามใช้ @latest:

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>

Font

Chart.defaults.font.family = "'Noto Sans Thai', 'Open Sans', system-ui, sans-serif";

Chart.js เป็นงานดิจิทัล (บริบทที่ 2) จึงใช้ Noto Sans Thai เสมอ ไม่ใช่ Sarabun/Kanit — ดู Typography

Color Mapping → B.Grimm Palette

จับคู่สีกราฟกับ Color Palette ตรงๆ ห้ามสุ่มสีเอง:

บทบาทในกราฟ	สี	HEX
ชุดข้อมูลหลัก (primary series)	B.Grimm Orange	#FF6727
เน้น/เส้นเป้าหมาย	Orange Dark	#C43400
Categorical เพิ่มเติม (เรียงตามลำดับ)	Dark Green → Yellow → Dark Pink → Dark Grey	#009C8D · #FFB92A · #C5004C · #63666F
ตัวอักษร/label/tick	Dark Grey	#63666F
Gridline / แกน	Grey Shade 0	#EBECF0

สี accent (เขียว/เหลือง/ชมพู) ใช้เป็นสีพื้นของ data ในกราฟได้ แต่ห้ามใช้เป็น body text — และตรวจ contrast ก่อนใช้กับตัวอักษรตาม Accessibility & Contrast

Base Theme Config

const BGRIMM = ['#FF6727', '#009C8D', '#FFB92A', '#C5004C', '#63666F'];

Chart.defaults.color = '#63666F';          // ทุก label/tick
Chart.defaults.borderColor = '#EBECF0';    // gridline default
Chart.defaults.font.family = "'Noto Sans Thai', 'Open Sans', system-ui, sans-serif";
Chart.defaults.font.size = 14;

const theme = {
  responsive: true,
  maintainAspectRatio: false,   // ให้ container คุมความสูง (ดู Responsive)
  animation: !window.matchMedia('(prefers-reduced-motion: reduce)').matches,
  plugins: {
    legend: { position: 'bottom', labels: { boxWidth: 12, padding: 16 } },
    tooltip: {
      backgroundColor: '#22242A', padding: 10, cornerRadius: 8,
      titleColor: '#FFFFFF', bodyColor: '#FFFFFF',
    },
  },
  scales: {
    x: { grid: { display: false }, ticks: { color: '#63666F' } },
    y: { grid: { color: '#EBECF0' }, border: { display: false }, ticks: { color: '#63666F' } },
  },
};
// ใช้: new Chart(ctx, { type: 'bar', data: { datasets: [{ backgroundColor: BGRIMM }] }, options: theme });

Responsive Breakpoints

• ตั้ง maintainAspectRatio: false แล้วครอบ <canvas> ด้วย wrapper ที่มีความสูงคงที่ — Chart.js จะ resize ตาม container เอง
• ความสูง wrapper แนะนำ: มือถือ ≥ 240px, แท็บเล็ต/เดสก์ท็อป 320–420px
• จอ < 480px: ย้าย legend ไป position: 'bottom' (หรือซ่อนถ้ากราฟมีชุดเดียว) และลด font.size เป็น 12 เพื่อกันตัวอักษรทับกัน
• layout เมื่อมีหลายกราฟในหน้าเดียวดูที่ Dashboard Patterns

Accessibility

• Data table fallback (บังคับ) — ดูหัวข้อถัดไป
• ห้ามใช้สีเป็นตัวสื่อความหมายเพียงอย่างเดียว — เพิ่ม label ค่าตรง, เส้นประ/pattern หรือไอคอน เผื่อผู้ใช้ตาบอดสี
• Tooltip/label ต้อง contrast ผ่านเกณฑ์ (พื้น tooltip ใช้ #22242A ตัวอักษรขาว)
• เคารพ prefers-reduced-motion — ปิด animation ตามตัวอย่าง config (สอดคล้อง Animation Guidelines)

Accessible Data Table Fallback (บังคับ)

ทุกกราฟต้องมี <table class="sr-only-table"> คู่กันเสมอ สำหรับ screen reader และกรณี Chart.js โหลดไม่ขึ้น (รายละเอียดเต็มดูใน AI & Skills → Claude Skill)

Do / Don't

✅ Do	❌ Don't
pin เวอร์ชัน Chart.js	ใช้ @latest
ใช้สีจาก BGRIMM array เรียงลำดับ	สุ่มสี/ใช้สี neon นอก palette
gridline เทาอ่อน #EBECF0 บางๆ	เส้น grid เข้ม/หนารกกราฟ
มี data table คู่ทุกกราฟ	ปล่อยกราฟลอยไม่มี fallback
ปิด animation เมื่อ reduced-motion	บังคับ animation ทุกกรณี