Interpolation Chart

NbInterpolationChart visualises a piecewise-linear mapping between two numeric scales and lets users calibrate the curve by dragging, adding, or removing control points.

Typical use case: bridging the gap between a device setpoint and the real-world effect it produces (e.g. water temperature vs. room temperature in a heat pump).

<template>
  <NbInterpolationChart
    v-model="points"
    title="Room to Water temperature"
    input-label="Room (C)"
    output-label="Water (C)"
    :input-min="18"
    :input-max="24"
    :output-min="30"
    :output-max="60"
    :input-step="0.5"
    :output-step="1"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const points = ref([
  { input: 18, output: 35 },
  { input: 20, output: 40 },
  { input: 22, output: 47 },
  { input: 24, output: 55 },
])
</script>

Interactions ​

• Drag a point to adjust its input/output values
• Double-click on the chart area to add a new point
• Right-click a point to remove it (minimum 2 points)
• Points cannot cross each other on the input axis

Read-only mode ​

Set editable to false to render the chart without drag/add/remove interactions.

Without axis labels ​

Props ​

Events ​

Types ​

interface IInterpolationPoint {
  input: number
  output: number
}

Notes ​

• Points are always emitted sorted by input (ascending).
• While dragging, a point's input value is clamped between its neighbours so points never cross.
• The chart uses piecewise linear interpolation (straight lines between points), matching the actual interpolation algorithm used by devices.
• Input/output step snapping helps users land on clean values (e.g. 0.5C increments).