https://github.com/iniceice88/oxyplot-js
https://github.com/iniceice88/oxyplot-js
chat oxyplot oxyplot-js oxyplot-typescript plotting typescript
Last synced: 21 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/iniceice88/oxyplot-js
- Owner: iniceice88
- License: mit
- Created: 2023-12-23T18:43:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-07T17:13:49.000Z (almost 2 years ago)
- Last Synced: 2026-03-08T07:41:36.063Z (about 2 months ago)
- Topics: chat, oxyplot, oxyplot-js, oxyplot-typescript, plotting, typescript
- Language: TypeScript
- Homepage: https://iniceice88.github.io/oxyplot-js/
- Size: 13.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[OxyPlot](https://github.com/oxyplot/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](https://iniceice88.github.io/oxyplot-js/)
[ExampleBrowser](https://stackblitz.com/edit/oxyplot-js-play-asx72fo)
[Playground](https://codesandbox.io/p/devbox/oxyplot-js-lqg5ld?file=%2Fsrc%2FApp.vue%3A25%2C54)
### Install
```bash
npm install oxyplot-js
npm install oxyplot-js-renderers
# for pdf renderer:
# npm install oxyplot-js-renderers-pdf
```
### How to use
```html
````
```ts
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
```