Skip to content
Get Pro
Trends

Profit / Loss Line

One line split exactly at zero. Above it the line and a soft fill are bone; below it the line drops to a cool grey with a hatch beneath, so a loss reads as money gone rather than as a colour.

$149 once · every Pro piece

Customize

The zero baseline is the one bright rule. The best and worst points carry quiet rings and pills that only take the accent while the cursor sits on them, and the crosshair snaps to them and to every zero crossing (Shift + arrows jump between them). The cursor dot takes the tone of its side. The legend's Profit and Loss rows isolate one sign or hide it, and the axis tweens to what is left.

Install

npx shadcn@latest add @obsyde/profit-loss-line

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { ProfitLossLine } from '@/components/obsyde/ember/profit-loss-line/ProfitLossLine';

export function Example() {
  return (
    <ProfitLossLine
      profitFill="gradient"
      lossFill="pattern"
      pattern="diagonal-up"
      extremes
      legend="row"
    />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/profit-loss-line/ProfitLossLine.tsxcomponent
  • ember/profit-loss-line/profit-loss-line.cssstyles
  • ember/profit-loss-line/ProfitLossLineDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/States.tsxshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/series.tsxshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Axis.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
profitFillProfit fill'gradient' | 'solid' | 'none''gradient'
lossFillLoss fill'pattern' | 'gradient' | 'none''pattern'
extremesHigh and lowbooleantrue
legendLegend'row' | 'list' | 'none''row'
tooltipTooltip'panel' | 'corner' | 'none''panel'
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''solid'
dotsDots'halo' | 'ring' | 'none''halo'
patternPattern'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''diagonal-up'
backgroundBackground'grid' | 'dots' | 'hatch' | 'none''grid'
curveCurve'monotone' | 'linear' | 'catmull' | 'step''monotone'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
statusStatus'ready' | 'loading' | 'empty''ready'
heightHeightnumber260
pointsPointsnumber40
seedSeednumber5