OxyPlot is a cross-platform plotting library for .NET

This repo has completely translated OxyPlot.Net into TypeScript, as well as almost all examples! Now you can use OxyPlot in web browsers and Node.js environments.

Get Started

Live Demo

ExampleBrowser

Playground

Install

npm install oxyplot-js
npm install oxyplot-js-renderers
# for pdf renderer:
# npm install oxyplot-js-renderers-pdf

How to use

<canvas
  id="canvasPlotView"
  style="width: 800px; height: 600px"
/>

import { CanvasPlotView } from 'oxyplot-js-renderers'
import { LineJoin, LineSeries, newDataPoint, OxyColors, PlotModel, RectangleAnnotation } from 'oxyplot-js'

const canvas = document.getElementById('canvasPlotView')! as HTMLCanvasElement
const plotView = new CanvasPlotView(canvas)

const model: PlotModel = new PlotModel({ title: 'LineSeries' })

const ls = new LineSeries({
  color: OxyColors.Black,
  strokeThickness: 6.0,
  lineJoin: LineJoin.Round,
})
ls.points.push(newDataPoint(0, 0))
ls.points.push(newDataPoint(100, 100))
model.series.push(ls)

model.annotations.push(
  new RectangleAnnotation({
    minimumX: 40,
    maximumX: 60,
    textRotation: 90,
    text: 'Orange',
    fill: '#FFAC1C',
    toolTip: 'Orange RectangleAnnotation',
  }),
)

plotView.model = model