Version: 1.0.0
Pane Primitives
Pane Primitives are visual overlays that span across the main chart pane. Unlike series primitives, they are not attached to a single series and do not render on the price or time scales. They are ideal for watermark indicators, gridlines, session highlights, and background textures.
Pane Primitive Lifecycle
Pane primitives implement a subset of the primitive interface, specifically focusing on drawing layers inside the main viewport canvas:
drawBackground(ctx, chartW, chartH): Renders visual elements behind gridlines and candlesticks. Ideal for watermark text, logo overlays, or customized session shadings.draw(ctx, chartW, chartH): Renders visual elements in the foreground layer, drawing above candlesticks but behind tooltips and floaters.
Example: Custom Watermark Primitive
Below is a full implementation of a custom watermark overlay that renders a logo and current status in the center of the main chart pane:
class CustomWatermarkPrimitive {
constructor(text, color) {
this.text = text || 'BACKTESTX';
this.color = color || 'rgba(41, 98, 255, 0.08)';
}
attached({ chart, requestUpdate }) {
this.chart = chart;
this.requestUpdate = requestUpdate;
}
// Draw watermark behind the series
drawBackground(ctx, chartW, chartH) {
ctx.save();
ctx.fillStyle = this.color;
ctx.font = 'bold 48px Inter, Arial, sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(this.text, chartW / 2, chartH / 2);
ctx.restore();
}
}
// Attach primitive to the chart widget instance
chart.attachPrimitive(new CustomWatermarkPrimitive('DEMO ONLY'));
constructor(text, color) {
this.text = text || 'BACKTESTX';
this.color = color || 'rgba(41, 98, 255, 0.08)';
}
attached({ chart, requestUpdate }) {
this.chart = chart;
this.requestUpdate = requestUpdate;
}
// Draw watermark behind the series
drawBackground(ctx, chartW, chartH) {
ctx.save();
ctx.fillStyle = this.color;
ctx.font = 'bold 48px Inter, Arial, sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(this.text, chartW / 2, chartH / 2);
ctx.restore();
}
}
// Attach primitive to the chart widget instance
chart.attachPrimitive(new CustomWatermarkPrimitive('DEMO ONLY'));