0.16.0 • Published 1 year ago

@talkrz/price-chart v0.16.0

Weekly downloads
34
License
MIT
Repository
github
Last release
1 year ago

price-chart

Simple, lightweight, zero-dependency, canvas-based library for drawing candlestick price charts

Online demo

This demo includes both React and vanilla JS examples: https://talkrz.github.io/price-chart-demo/

Play with the code in CodeSandbox

https://codesandbox.io/s/pxx9l9oz0

Screenshots

Screenshot Screenshot Screenshot

Usage

Minimal example without user interactions

Include the library in your HTML document:

<script src="https://unpkg.com/@talkrz/price-chart@latest/dist/price-chart-umd.min.js"></script>

Make canvas elements to draw the chart on:

<div id="Root">
  <div id="ChartContent" class="Chart">
    <canvas id="ChartCanvasContent" class="Chart-canvas">
    </canvas>
    <canvas id="ChartCanvasScale" class="Chart-canvas-scale">
    </canvas>
  </div>
</div>

Position the canvas layers one on top the other:

#Root {
  width: 100%;
  height: 100vh;
  display: flex;
}

.Chart {
  position: relative;
  flex-grow: 1;
}

.Chart-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.Chart-canvas-scale {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

Draw the chart:

// create HTML elements references
const content = document.getElementById('ChartContent');
const base = document.getElementById('ChartCanvasContent');
const scale = document.getElementById('ChartCanvasScale');

// set chart dimensions
// in this case the content HTML element dimensions
const width = content.offsetWidth;
const height = content.offsetHeight;

// define drawing layers, minimum 2 layers are required
// one for drawing price and volume
// and other for scale
const layers = {
  base: base,
  scale: scale
};

// prepare chart view
const chartState = {
  width,
  height,
  zoom: 8,
  offset: 0,
  // you can modify the config and theme objects
  // but here we just use the default ones
  config: PriceChart.chartDefaultConfig(),
  theme: PriceChart.chartThemes()['light'],
}

PriceChart.chartInit(
  data,
  layers,
  chartState
);

// draw chart
PriceChart.chartDraw();

Release new version

  1. Update version in package.json
  2. Update CHANGELOG.md file
  3. Run:
    # This command will fail if tests don't pass
    npm run release
  4. Execute commands printed by it
0.15.0

1 year ago

0.16.0

1 year ago

0.14.0

3 years ago

0.12.8

3 years ago

0.12.7

3 years ago

0.12.6

3 years ago

0.12.5

3 years ago

0.12.4

3 years ago

0.12.3

3 years ago

0.12.2

3 years ago

0.12.1

3 years ago

0.12.0

3 years ago

0.11.2

3 years ago

0.11.1

3 years ago

0.11.0

3 years ago

0.10.3

3 years ago

0.10.2

3 years ago

0.10.1

3 years ago

0.10.0

3 years ago

0.9.1

3 years ago

0.9.0

3 years ago

0.8.0

3 years ago

0.7.0

3 years ago

0.6.0

3 years ago

0.5.0

3 years ago

0.4.0

3 years ago

0.3.0

3 years ago

0.2.0

3 years ago

0.1.0

3 years ago

0.0.6

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.1

3 years ago