BuySell is an official Black Label plugin for Highcharts, extending the charting library with an interactive trading form interface to Highcharts Stock charts. It provides a fully configurable Buy/Sell form with dynamic form fields, real-time market data integration, and order visualization through chart annotations. The plugin is built as a separate add-on to the Highcharts library, owned and maintained by Highsoft AS.
This module is the result of our long-standing collaboration with Highsoft, where we’ve been a trusted partner since 2010 — helping build, maintain, and expand the Highcharts ecosystem. With BuySell, you can easily use an interactive Buy/Sell interface with comprehensive form and customization options without relying on custom implementations or workarounds.
➖ Live demo
➖ GitHub repository
- Getting Started
- Usage
- Available Options
- API Reference
- Development Setup
- Using the module locally in index.html
| BuySell Version | Highcharts Version |
|---|---|
| 1.0.0 | >= 12.0.0 |
Install via NPM:
npm install highcharts highcharts-buysell
# or
yarn add highcharts highcharts-buysell
# or
pnpm add highcharts highcharts-buysellThen import and initialize:
import Highcharts from "highcharts";
import HighchartsBuysell from "highcharts-buysell";
HighchartsBuysell(Highcharts);Or include via a <script> tag after loading Highcharts:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://blacklabel.github.io/buysell/js/buysell.js"></script>Enable buySell by setting the buySell.enabled option:
Highcharts.chart('container', {
title: {
text: 'My Trading Chart'
},
series: [{
data: [1, 2, 3, 4, 5]
}],
buySell: {
enabled: true,
title: 'Trading Form',
events: {
onAfterSubmit: function (data, buySell) {
console.log('Order submitted:', data);
}
}
}
});| Option | Type | Description |
|---|---|---|
enabled |
boolean |
Enable/disable the module |
url |
string |
URL to buySell server |
symbol |
string |
Default stock symbol |
title |
string |
Form's modal title |
height |
number |
Form's modal height in px |
width |
number |
Form's modal width in px |
button |
BuySellButtonOptions |
Button configuration |
persistence |
BuySellPersistenceOptions |
Save/load form state |
events |
BuySellEventCallbacks |
Event callbacks |
interface BuySellButtonOptions {
align: 'left' | 'center' | 'right';
text: string;
theme: Highcharts.GlobalButtonThemeOptions;
verticalAlign: 'top' | 'middle' | 'bottom';
x: number;
y: number;
}interface BuySellPersistenceOptions {
enabled: boolean;
key: string;
}interface BuySellEventCallbacks {
onAfterInit?: (
buySell: BuySell
) => void | Promise<void>;
onAfterSubmit?: (
data: unknown,
buySell: BuySell
) => void | Promise<void>;
onBeforeSubmit?: (
data: BuySellFormData,
buySell: BuySell
) => void | Promise<void>;
onClose?: (
buySell: BuySell
) => void;
onFieldChange?: (
field: string,
value: string,
buySell: BuySell
) => void;
onOpen?: (
buySell: BuySell
) => void;
onTabChange?: (
value: string,
buySell: BuySell
) => void;
}Shows the BuySell modal.
Hides the BuySell modal.
Toggles the BuySell modal visibility.
Adds an annotation to the chart for a given order.
Destroys the currently rendered buy and sell annotations.
Resets form to the initial state.
Updates a specific field value.
Saves form state to localStorage.
Loads form state from localStorage.
Destroys the BuySell instance and cleans up resources.
Destroys the button of a BuySell instance.
Destroys the modal of a BuySell instance.
Fired after the form is initialized.
Fired when the form opens.
Fired when the form closes.
Fired when the Buy/Sell tabs are changed.
Fired when the field is updated with a new value.
Fired before the form is submitted with validated data.
Fired after the form is submitted with validated data.
If you want to work on this module locally:
- Clone the repository
git clone https://github.com/blacklabel/buysell.git
cd buysell- Install dependencies
npm install
# or
yarn install
# or
pnpm add highcharts highcharts-buysell- Build the plugin
npm run build-
The compiled file will be available in the js/ and types/ folders.
-
Other useful commands
# Watch for changes
npm run dev
# Lint + build code
npm run complete
# Lint code
npm run lint
# Build code
npm run build
# Watch code
npm run watchAfter building, include the module file after Highcharts in your html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Highcharts BuySell - Local Dev</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="js/buysell.js"></script>
</head>
<body>
<div id="container"></div>
<script>
Highcharts.chart('container', {
buySell: {
enabled: true
},
series: [{
data: [1, 2, 3, 4, 5]
}]
});
</script>
</body>
</html>At Black Label, we specialize in pushing the boundaries of data visualization. Over the past 15 years, we’ve worked with companies worldwide to build charting solutions that go beyond out-of-the-box libraries.
Highcharts is at the heart of much of our work, and this plugin grew directly out of real-world client needs:
- Embedding a Buy/Sell form directly within the chart means traders never have to leave the visualization to place an order.
- Dynamic form fields are fetched from the broker's API, so the plugin adapts to any broker's requirements without custom frontend work.
- Submitted orders appear as annotations on the chart itself, giving traders immediate visual confirmation alongside their price data.
BuySell is one of many plugins we’ve created to make Highcharts more flexible, more powerful, and more developer-friendly.
We’re a Krakow-based team of data visualization experts, working closely with Highsoft and the global Highcharts community since 2010. Our expertise spans plugins, extensions, custom dashboards, and full-scale dataviz applications.
BuySell is just one of the many innovations we’ve open-sourced. Explore more on our GitHub profile, read insights on our Blog, or connect with us at tech@blacklabel.net to discuss how we can help bring your charts and dashboards to life.
➖ Learn more on our LinkedIn page.