如何使用HTML/CSS自定义Chart.js图表标题？

问题原因 #

Chart.js内置的标题插件会将text属性内容直接作为纯文本渲染，不会解析HTML标签，所以你写入的<span>会被原样输出，无法应用样式。

解决方案1：手动添加DOM标题（最简方案） #

直接在图表容器中插入独立的DOM标题元素，完全用CSS控制样式，无需依赖Chart.js插件：

完整代码示例 #

HTML

<div class="chartCard">
  <div class="chartBox">
    <!-- 自定义标题DOM -->
    <div class="chart-title">This is a <span class="blue-word">blue</span> word</div>
    <canvas id="myChart"></canvas>
  </div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.chartMenu {
  width: 100vw;
  height: 60px;
  background: #1a1a1a;
  color: rgba(54, 162, 235, 1);
}

.chartMenu p {
  padding: 10px;
  font-size: 20px;
}

.chartCard {
  width: 100vw;
  height: calc(100vh - 40px);
  background: rgba(4, 150, 248, 0.776);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chartBox {
  width: 80%;
  padding: 20px;
  border-radius: 20px;
  border: solid 3px rgba(54, 162, 235, 1);
  background: white;
  text-align: center; /* 标题居中对齐 */
}

/* 自定义标题样式 */
.chart-title {
  font-weight: 200;
  font-size: 22px;
  margin-bottom: 20px; /* 与图表保持间距 */
}

.blue-word {
  color: blue;
}

JavaScript

const data = {
  labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  datasets: [{
    label: "Weekly Sales",
    data: [18, 12, 6, 9, 12, 3, 9],
    backgroundColor: [
      "rgba(255, 26, 104, 0.2)",
      "rgba(54, 162, 235, 0.2)",
      "rgba(255, 206, 86, 0.2)",
      "rgba(75, 192, 192, 0.2)",
      "rgba(153, 102, 255, 0.2)",
      "rgba(255, 159, 64, 0.2)",
      "rgba(0, 0, 0, 0.2)",
    ],
    borderColor: [
      "rgba(255, 26, 104, 1)",
      "rgba(54, 162, 235, 1)",
      "rgba(255, 206, 86, 1)",
      "rgba(75, 192, 192, 1)",
      "rgba(153, 102, 255, 1)",
      "rgba(255, 159, 64, 1)",
      "rgba(0, 0, 0, 1)",
    ],
    borderWidth: 1,
  }],
};

const config = {
  type: "bar",
  data,
  options: {
    plugins: {
      legend: { display: false },
      // 移除内置title插件配置
    },
    scales: {
      x: { ticks: { font: { size: 18 } } },
      y: { beginAtZero: true, ticks: { font: { size: 18 } } },
    },
  },
};

const myChart = new Chart(document.getElementById("myChart"), config);

解决方案2：自定义Chart.js插件（保持配置一致性） #

如果希望通过Chart.js配置体系管理标题，可以编写自定义插件，在图表绘制完成后动态插入HTML标题：

自定义插件代码 #

const htmlTitlePlugin = {
  id: 'htmlTitle',
  afterDraw: (chart) => {
    const titleOpts = chart.options.plugins.htmlTitle;
    if (!titleOpts) return;
    
    const chartContainer = chart.canvas.parentNode;
    // 移除旧标题
    const oldTitle = chartContainer.querySelector('.chart-html-title');
    if (oldTitle) oldTitle.remove();
    
    // 创建新标题元素
    const titleElement = document.createElement('div');
    titleElement.className = 'chart-html-title';
    titleElement.innerHTML = titleOpts.text;
    titleElement.style.cssText = `
      font-size: ${titleOpts.font.size}px;
      font-weight: ${titleOpts.font.weight};
      text-align: center;
      margin: ${titleOpts.padding || 10}px 0;
    `;
    
    // 插入到图表容器顶部
    chartContainer.insertBefore(titleElement, chart.canvas);
  }
};

// 注册插件
Chart.register(htmlTitlePlugin);

插件使用配置 #

在Chart.js配置中添加插件参数：

const config = {
  type: "bar",
  data,
  options: {
    plugins: {
      legend: { display: false },
      htmlTitle: {
        text: "This is a <span class='blue-word'>blue</span> word",
        font: { weight: 200, size: 22 },
        padding: 15
      }
    },
    scales: {
      x: { ticks: { font: { size: 18 } } },
      y: { beginAtZero: true, ticks: { font: { size: 18 } } },
    },
  },
};

CSS中保留.blue-word样式即可实现蓝色文字效果。

内容的提问来源于stack exchange，提问作者Will