Herramientas de dibujo

69 herramientas de dibujo integradas. Todas se ajustan a las barras con el imán, admiten deshacer y rehacer, guardan su propia configuración y se guardan con el diseño.

Dibujar con el puntero

chart.setDrawingTool('trendLine')   // los siguientes clics dibujan una línea de tendencia
chart.setDrawingTool(null)          // vuelve al cursor
chart.setStayInDrawingMode(true)    // mantiene la herramienta tras cada dibujo

Una herramienta se dibuja de una de estas tres maneras:

  • Clics — un clic por punto (dos para una línea de tendencia, cinco para un patrón XABCD).
  • Mano alzada — pulsa y arrastra; brush y highlighter.
  • Ruta — un clic por punto y, para terminarla, un doble clic, Enter o un clic en el último punto; path y polyline.

Escape descarta un dibujo que aún no está terminado.

Añadir dibujos desde el código

const id = chart.addDrawing({
  type: 'fibRetracement',
  anchors: [{ time: t1, price: 101.2 }, { time: t2, price: 96.4 }],
  style: { color: '#f2a93b' },
  options: { reverse: true, extendRight: true },
})

chart.autoFib()   // un retroceso sobre el swing dominante a la vista, o null

Configuración

Además de su estilo (color, grosor, estilo de línea, relleno, texto), una herramienta puede ofrecer configuración propia: niveles de Fibonacci, extender una línea a la izquierda o a la derecha, etiquetas, un fondo, un icono, un grado de onda. El diálogo de configuración del widget se construye a partir de ella.

chart.getDrawingOptionDefs('fibRetracement')  // qué ofrece la herramienta
chart.getDrawingOptions(id)                   // sus valores, con los predeterminados rellenados
chart.setDrawingOptions(id, {
  levels: [{ value: 0.5, visible: true }, { value: 0.618, visible: true, color: '#e8505b' }],
})

// varios cambios como un solo paso de deshacer
chart.updateDrawing(id, { style: { lineWidth: 2 }, options: { extendLeft: true } })

// un diálogo que previsualiza los cambios: un paso de deshacer, o se revierte al cancelar
chart.beginDrawingEdit(id)
chart.updateDrawing(id, { style: { color: '#26a69a' } })
chart.endDrawingEdit(id, { cancel: false })

// con qué empieza cada retroceso de Fibonacci nuevo
chart.setDrawingToolDefaults('fibRetracement', { showPrices: false })

La configuración de un diseño guardado o de un dibujo pegado se comprueba contra la herramienta; los valores que esta no admite se descartan.

Posición larga/corta

riskReward: arrastra desde la entrada hasta el stop. El objetivo se coloca a la distancia que marca la proporción beneficio:riesgo, y su punto de control cambia esa proporción. A partir del tamaño de la cuenta y del riesgo (un porcentaje de la cuenta o un importe) calcula la cantidad y muestra el precio, la distancia y la ganancia o pérdida de cada línea.

chart.setDrawingOptions(id, { accountSize: 25_000, riskMode: 'percent', risk: 1, rewardRatio: 3 })

Alertas en dibujos

Una alerta puede seguir una línea de tendencia, un rayo, una línea extendida u horizontal, o las líneas de un canal paralelo: se activa cuando el precio cruza la línea en el valor que esta tiene en la última barra, tal como está dibujada en el gráfico (recta entre barras y, en una escala logarítmica, en precio logarítmico).

if (chart.canAddDrawingAlert(id)) {
  chart.addDrawingAlert(id, { condition: 'crossingUp', message: 'Broke the trend line' })
}

La alerta acompaña a su dibujo, vuelve con él al deshacer y se guarda con el diseño.

Orden y grupos

chart.moveDrawing(id, 'front')       // 'front' | 'forward' | 'backward' | 'back'
const group = chart.groupDrawings([a, b, c], 'Weekly levels')
chart.setDrawingGroupVisible(group, false)
chart.setDrawingGroupLocked(group, true)
chart.ungroupDrawings(group)

chart.getSelectedDrawingIds()
chart.removeDrawings(ids)            // un solo paso de deshacer
chart.setDrawingsVisible(ids, false)
chart.setDrawingsLocked(ids, true)

Al hacer clic en un dibujo de un grupo se selecciona todo el grupo.

Borrador, zoom e imán

chart.setEraserMode(true)          // cada clic sobre un dibujo lo elimina, hasta pulsar Escape
chart.setZoomAreaMode(true)        // el siguiente arrastre amplía las barras que quedan dentro del recuadro
chart.setDrawingMagnetMode('strong') // 'off' | 'weak' | 'strong'

El imán débil ajusta un punto a la apertura, el máximo, el mínimo o el cierre de la barra cuando el puntero está cerca de uno de ellos; el imán fuerte lo hace siempre.

Teclado

  • Ctrl/⌘ + Z deshacer, Ctrl + Shift + Z o Ctrl + Y rehacer.
  • Ctrl + C / V copiar y pegar dibujos, Ctrl + D duplicar, Delete eliminar.
  • Ctrl + G agrupar la selección, Ctrl + Shift + G desagrupar.
  • Ctrl + ] / [ traer adelante / enviar atrás; con Shift, al frente / al fondo.
  • Enter termina una ruta; Escape abandona la herramienta, el borrador o la selección.

Eventos

chart.on('drawingCreate', (e) => e.payload)       // { id, type, drawing }
chart.on('drawingUpdate', (e) => e.payload)       // { id }
chart.on('drawingRemove', (e) => e.payload)       // { id }
chart.on('drawingDoubleClick', (e) => e.payload)  // { id }
chart.on('drawingContextMenu', (e) => e.payload)  // { id, x, y }
chart.on('toolModeChange', (e) => e.payload)      // { eraser } o { zoomArea }

Deshacer y rehacer envían drawingCreate, drawingRemove y drawingUpdate para los dibujos que recuperan, quitan o modifican.

Catálogo

Líneas

  • trendLine — se extiende a la izquierda o a la derecha si se pide.
  • ray, extendedLine
  • horizontalLine, horizontalRay (hacia delante en el tiempo desde su punto), verticalLine, crossLine
  • infoLine — con un cuadro de variación de precio, barras, tiempo y ángulo.
  • trendAngle — con su ángulo en pantalla.

Canales

  • parallelChannel — con una línea central opcional, que se extiende en cualquiera de los dos sentidos.
  • regressionChannel

Fibonacci

  • fibRetracement, fibExtension — niveles editables, precios y porcentajes, etiquetas a la izquierda o a la derecha, fondo, invertir.
  • fibChannel, fibTimeZones, fibSpeedResistanceFan
  • fibArcs — arcos alrededor del inicio de un movimiento, semicírculos o círculos completos.
  • fibCircles — círculos en múltiplos de Fibonacci de un radio.
  • fibSpiral — una espiral áurea desde su centro.
  • fibWedge — arcos entre dos líneas que parten de un vértice.

Gann y horquillas

  • pitchfork, schiffPitchfork, modifiedSchiffPitchfork
  • pitchfan — rayos desde un pivote a través de niveles entre dos puntos.
  • gannFan, gannBox, gannSquare

Formas

  • rectangle, circle, ellipse, triangle
  • polyline — una forma cerrada, un punto por clic.
  • curve — curvada a través de un tercer punto; arc — un arco de circunferencia por tres puntos.

Pinceles

  • brush, highlighter — a mano alzada.
  • path — una línea a través de puntos, con una flecha al final.

Patrones

  • xabcdPattern, cypherPattern, abcdPattern, threeDrives — con sus proporciones.
  • headAndShoulders — con la línea clavicular.

Ondas de Elliott

  • elliottWave (1–5, A–C), elliottImpulse, elliottCorrection, elliottTriangle, elliottDoubleCombo, elliottTripleCombo — etiquetas al estilo del grado de la onda: ①, (1), 1 o i.

Ciclos

  • cyclicLines, timeCycles, sineLine

Medición

  • measure, priceRange, dateRange, dateAndPriceRange

Notas y marcas

  • text, note (una chincheta con su texto), callout, priceLabel
  • arrow, arrowMark (arriba, abajo, izquierda o derecha, con etiqueta), flag, icon (estrella, corazón, marca de verificación, cruz, círculo, triángulos, rayo)

Previsión

  • riskReward — Posición larga/corta (arriba).
  • forecast — verde cuando el precio alcanza el objetivo, rojo si antes se agota su tiempo.
  • projection — un movimiento trasladado desde un tercer punto.
  • barsPattern — una copia de algunas barras, como barras, línea o máximo-mínimo, reflejada o volteada.
  • anchoredVWAP, volumeProfileRange

Guardado

const json = chart.saveState()   // dibujos, su configuración y grupos, indicadores, alertas…
chart.loadState(json)            // comprueba cada dibujo; los mal formados se descartan

Tus propias herramientas

Una herramienta es un DrawingPlugin registrado con chart.registerDrawingTool(plugin). Su descriptor enumera su configuración (options), cómo se dibuja (creation) y si tiene relleno o texto; puede dar los precios de sus líneas (priceAt, para las alertas), puntos de control para mover que no son anclas (moveHandle) y recibir las barras del gráfico (setDataGetter). Consulta Plugins.