Highchartsで背景色・背景画像を変更する方法

Other
2021.09.01

Highchartsでは背景色を変更できる範囲として、全体とチャート部のみがあります。
この違いとやり方について説明します。

スポンサーリンク

全体の背景色を変更

単色で背景色を設定

chartオプション内にbackgroundColorを設定することで全体の背景色を変更することができます。

document.addEventListener('DOMContentLoaded', function () {
  chart = Highcharts.chart('container', {
    chart: {
      type: 'spline',
      backgroundColor: '#cab8d9'
    },
    ... 略 ...
  });
});

グラデーションで背景色を設定

backgroundColorにグラデーションを設定することも可能です。

document.addEventListener('DOMContentLoaded', function () {
  chart = Highcharts.chart('container', {
    chart: {
      type: 'spline',
      backgroundColor: {
        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
        stops: [
            [0, '#4753a2'],
            [1, '#a4d5bd']
        ]
      }
    },
    ... 略 ...
  });
});

チャート部の背景色を変更

単色で背景色を設定

chartオプション内にplotBackgroundColorを設定することでチャート部の背景色を変更することができます。

document.addEventListener('DOMContentLoaded', function () {
  chart = Highcharts.chart('container', {
    chart: {
      type: 'spline',
      plotBackgroundColor: '#ffefd5'
    },
    ... 略 ...
  });
});

グラデーションで背景色を設定

plotBackgroundColorも同様にグラデーションを設定することが可能です。

document.addEventListener('DOMContentLoaded', function () {
  chart = Highcharts.chart('container', {
    chart: {
      type: 'spline',
      plotBackgroundColor: {
        linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
        stops: [
            [0, '#fad09e'],
            [1, '#f5b2ac']
        ]
    },
    ... 略 ...
  });
});

チャート部に背景画像を設定

plotBackgroundImageに画像のURLを設定することでチャート部の背景に画像を設定することができます。
今回は次の画像のURLを設定してみます。

設定したものがこちらです。

document.addEventListener('DOMContentLoaded', function () {
  chart = Highcharts.chart('container', {
    chart: {
      type: 'spline',
      plotBackgroundImage: 'https://toronavi.com/wp-content/uploads/2020/02/header_background-e1582599885329.jpg'
    },
    ... 略 ...
  });
});

関連記事

とりあえずチャートを表示する方法については知りたい方は、こちらを読んでみるのはいかがでしょうか。

Highchartsでグラフを表示させるところまでやってみた
TMLやCSS、JavaScriptはあまり経験がないのですが、JavaScriptのHighchartsライブラリを使って「資産推移チャートプログラム」を作りました。このとき学んだことを書いていきます。 Highchartsとは High
toronavi.com