Hodograph

This page explains, how to add a hodograph to a thermodynamic diagram and how to style it.

Hodograph options

Construction

See How to create a thermodynamic diagram, how to place and size the hodograph and how to add it to the SVG image.

Mainly, this will we the following code:

import Hodograph from 'meteojs/thermodynamicDiagram/Hodograph';

const hodograph = new Hodograph({
  x: …,
  y: …,
  width: …,
  height: …
});
diagram.appendPlotArea(hodograph);

Futher options

There are several possibilities to style the hodograph. The following code shows all of them with the defaults.

const hodograph = new Hodograph({
  …,
  grid: {
    axes: {
      visible: true,
      style: {
        color: 'black',
        width: 1,
        opacity: undefined,
        linecap: undefined,
        linejoin: undefined,
        dasharray: undefined,
        dashoffset: undefined,
      }
    },
    circles: {
      interval: 13.89,
      visible: true,
      style: {
        color: 'black',
        width: 1,
        opacity: undefined,
        linecap: undefined,
        linejoin: undefined,
        dasharray: undefined,
        dashoffset: undefined,
      }
    },
    labels: {
      angle: 45,
      unit: 'km/h',
      prefix: '',
      decimalPlaces: 0,
      backdrop: {
        visible: true,
        color: 'white'
      },
    },
    max: undefined
  },
  windspeedMax: 41.67,
  origin: [0.5, 0.5],
  hoverLabels: {
    maxDistance: 20,
    hodograph: {
      pressure: {
        visible: true,
        decimalPlaces: 0,
        prefix: ' hPa'
      },
      windspeed: {
        visible: true,
        unit: 'km/h',
        decimalPlaces: 0,
        prefix: ' kn'
      },
      winddir: {
        visible: true,
        decimalPlaces: 0,
        prefix: '°'
      },
      fill: {},
      horizontalMargin: 10,
      verticalMargin: 0,
      radius: undefined,
      radiusPlus: 2,
      font: {
        size: 12,
        color: 'black',
        anchor: 
      }
    }
  }
});