Reciprocal axis mapping

The upper abscissa axis displays the temperature while the lower abscissa displays the reciprocal temperature — notice the inverted direction on the lower axis.

The lineLength property of the ordinate has been reduced to highlight the arrows directions on the abscissae.

The relevant code snippet is:

kontrast.addEventListener('load', function() {
  let figure = kontrast.createFigure({
    element: 'figure'
  })

let temperatureMin = 150
  let temperatureMax = 600

let graph1 = figure.createGraph({
    abscissae: {
      temperature: {
        min: temperatureMin,
        max: temperatureMax,
        yOrigin: 1,
        mapping: 'positiveReciprocal',
        label: {
          text: katex.renderToString('T / \\mathrm{K}'),
          horizontalAnchor: 1,
          verticalAnchor: 1,
          position: 1
        }
      },
      inverseTemperature: {
        reverseDirection: true,
        min: 1 / temperatureMax,
        max: 1 / temperatureMin,
        yOrigin: -1,
        gridOpacity: 0,
        label: {
          text: katex.renderToString('(1 / T) / (1 / \\mathrm{K})'),
          horizontalAnchor: -1,
          verticalAnchor: -1,
          position: -1
        }
      }
    },
    ordinates: {
      y: {
        min: 1,
        max: 2e4,
        xOrigin: -1,
        mapping: 'log10',
        lineLength: 1.7,
        label: {
          text: katex.renderToString('k'),
          horizontalAnchor: 0,
          verticalAnchor: -1
        }
      }
    },
    annotations: {
      title: {
        zone: 'top',
        text: 'Arrhenius-Plot'
      }
    }
  })

graph1.abscissae.temperature.min.addEventListener('change', sync)
  graph1.abscissae.temperature.max.addEventListener('change', sync)

graph1.abscissae.inverseTemperature.min.addEventListener(
    'change',
    sync
  )
  graph1.abscissae.inverseTemperature.max.addEventListener(
    'change',
    sync
  )

graph1.createAnnotation({
    name: 'legend',
    zone: 'inside',
    text: [
      '<div class="kontrast-figure0-graph0-plot0 legend-before">Line 1</div>',
      '<div class="kontrast-figure0-graph0-plot1 legend-before">Curve 2</div>',
      '<div class="kontrast-figure0-graph0-plot2 legend-before">Curve 3</div>'
    ].join(''),
    verticalAnchor: 1,
    horizontalAnchor: -1,
    verticalOrigin: 0.8,
    horizontalOrigin: -0.8
  })

let count = 9
  let t = new Float64Array(count)
  let y0 = new Float64Array(count)
  let y1 = new Float64Array(count)
  let y2 = new Float64Array(count)
  for (let i = 0; i < count; i++) {
    t[i] = 150 + 50 * i
    y0[i] = Math.pow(1.015, t[i])
    y1[i] = 2 * Math.pow(1.015, t[i])
    y2[i] = 0.9 * Math.pow(1.013, t[i])
  }

graph1.createPoints({
    thickness: 10,
    color: 'red',
    data: {
      temperature: t,
      y: y0
    }
  })

graph1.createLines({
    thickness: 2,
    color: 'yellow',
    data: {
      temperature: t,
      y: y1
    }
  })

graph1.createLines({
    thickness: 2,
    color: 'green',
    data: {
      temperature: t,
      y: y2
    }
  })

function sync() {
    graph1.abscissae.inverseTemperature.min.assign(
      1 / graph1.abscissae.temperature.max.value
    )
    graph1.abscissae.inverseTemperature.max.assign(
      1 / graph1.abscissae.temperature.min.value
    )
  }
})