Highchartsメモ

highcharts javascript

これは何か

毎回設定方法を忘れるので、逆引き的なメモを残しておきます。

基本

レシピ

（実際に動くサンプルは一番下にあります）

legendを外したい (c-1)

const config = {
  legend: {
    enabled: false
  },
  // ...
};

高さを変更したい (c-1)

const config = {
  chart: {
    // null(初期値)の場合、描画対象のcontainerの高さが利用される
    // containerの高さが設定されてない場合は400pxになる
    height: '200px'
  },
  // ...
};

crosshair(照準線)を表示 (c-1)

const config = {
  xAxis: {
    crosshair: {
    }
  },
  // ...
};

タイトルを非表示にする (c-2)

const config = {
  title: {
    // 空文字を設定
    text: ''
  },
  // ...
};

Axisを非表示にする (c-2)

const config = {
  xAxis: {
    visible: false
  },
  yAxis: {
    visible: false
  },
  // ...
};

どのAxisタイプを利用すべきか

Categories are groups of items, like for example “Apples”, “Pears” and “Oranges”, or “Red”, “Green”, “Blue”, “Yellow”. These categories have that in common that there are no intermediate values.

…

If you find that you can skip category labels by the xAxis.labels.step option, chances are that you are better off using a linear or datetime axis.

An xAxis of the linear or datetime type has the advantage that Highcharts is able to determine how close the data labels should be because it knows how to interpolate. The labels will by default be placed with approximately 100px between them, which can be changed in the tickPixelInterval option. If you have predictable categories like “Item1”, “Item2”, “Item3” or “2012-01-01”, “2012-01-02”, “2012-01-03” etc., linear or datetime axis types combined with an xAxis.labels.formatter would probably be a better choice.

Axisに日付を利用したい

  • http://api.highcharts.com/highcharts/xAxis.type

    • The type of axis. Can be one of linear, logarithmic, datetime or category. In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days. In a category axis, the point names of the chart’s series are used for categories, if not a categories array is defined. Defaults to linear.

Axisのタイプにdatetimeを設定 (c-3, c-4)

pointStart, pointIntervalを利用

const config = {
  xAxis: {
    type: 'datetime',
  },
  plotOptions: {
    series: {
      pointStart: Date.UTC(2010, 0, 1),
      pointInterval: 24 * 3600 * 1000 // one day
    }
  },
  // ...
};

seriesのdataでx valueを設定
https://www.highcharts.com/docs/chart-concepts/series

const config = {
  xAxis: {
    type: 'datetime',
  },
  series: [{
    name: 'Jane',
    data: [
      [Date.UTC(2010, 0, 1), 1],
      [Date.UTC(2010, 0, 2), 0],
      [Date.UTC(2010, 0, 3), 4]
    ]
  }, {
    name: 'John',
    data: [
      [Date.UTC(2010, 0, 1), 5],
      [Date.UTC(2010, 0, 2), 7],
      [Date.UTC(2010, 0, 3), 3]
    ]
  }]
  // ...
};

Axisのタイプにcategoryを設定 (c-5)

const config = {
  xAxis: {
    categories: [
      '2010-01-01',
      '2010-01-02',
      '2010-01-03',
    ],
  },
  // ...
};

背景部分にテキスト、文字、ラインを表示（非表示）したい (c-6, c-7, c-8)

const config = {
  yAxis: {
    // 横線を隠す
    gridLineWidth: 0
  },
  // ...
};

const config = {
  xAxis, {
    // 特定エリアに塗りとテキストと追加
    plotBands: [{
      color: 'rgba(0,0,255,.05)',
      from: -0.5,
      to: 0.5,
      label: {
        text: 'test'
      }
    }],
  // ...
};

const config = {
  xAxis, {
    // 特定の位置にラインを追加
    plotLines: [{
      color: '#f00',
      value: 0.5,
      width: 2,
    }],
  // ...
};

const config = {
  xAxis, {
    // xAxisにもグリッドラインを追加
    gridLineWidth: 2,
    tickInterval:1,

    // この設定は状況に合わせて（カテゴリーかどうか）
    tickmarkPlacement: 'on',
  // ...
  }
};

c-0 - c-2

c-3 - c-5

c-6 - c-8