How i can draw line on chart, can you show simple code ?

[koshak01]

var figure = klinecharts.getFigureClass('line')
        var attrs = {
            coordinates : [
                 {x : 0, y: 0}
                ,{x : 100, y: 100}
            ]
        }
        var styles = {
             style : "dashed"
            ,color : "#f99658"
            ,size : 4
            ,dashedValue: [6,6]
        }
        var ctx = window.klines.getContext('2d') // !!!!! where i can get ctx? 
        new figure({ attrs, styles}).draw(ctx)

[char101]

Elements in the chart are called overlay and indicator. Overlays are drawn based on coordinates while indicators are drawn based on the data values. Overlays and indicators can use prebuilt figures to draw the shapes or you can draw directly in the canvas using the draw method when registering custom overlay/indicators. ctx is a parameter in the draw method.

To draw a line you create a segment overlay. This can be done interactively or programatically (by giving the points value in the createOverlay options).

chart.createOverlay({
  name: 'segment',
  points: [
    {timestamp: ..., value: ...},
    {timestamp: ..., value: ...},
  ]
}, 'candle_pane')

[koshak01]

Super, success, can i place not segment, i want put price line

thx

[koshak01]

Thank you so much, there are simply no words! everything works, I'm a cretin, I don't understand how it works!

[koshak01]

look 0.058366176 - price with label( create as in example - https://klinecharts.com/en-US/sample/overlay.html)

0.05862904 - create line as you say in this issuse.

how i can draw label on scale pane( 0.05862904 ) ?

thx

[char101]

Register custom price line overlay, add another text figure to the overlay, set the x coordinate of the text to bounding.width.

See how the last price line is drawn here.

[koshak01]

KLineChart/src/extension/overlay/priceLine.ts

Line 19 in 54144d7

const priceLine: OverlayTemplate = {

i found, tnx

can i be you sponsor?

[koshak01]

set the x coordinate of the text to bounding.width - i not see marker )

klinecharts.registerOverlay({
             name: 'price_line'
            ,totalStep: 2
            ,zLevel : 10000
            ,needDefaultPointFigure: true
            ,needDefaultXAxisFigure: true
            ,needDefaultYAxisFigure: true
          ,createPointFigures: ({ coordinates, bounding, precision, overlay, thousandsSeparator }) => {
            const { value = 0 } = (overlay.points)[0]
            return [
              {
                type: 'line',
                attrs: { coordinates: [coordinates[0], { x: bounding.width, y: coordinates[0].y }] }
              },
              {
                type: 'text',
                ignoreEvent: true,
                attrs: {
                    x: bounding.width,
                    y: coordinates[0].y,
                    text: klinecharts.utils.formatThousands(value.toFixed(precision.price), thousandsSeparator),
                    baseline: 'middle',
                 //   textAlgin: 'right'
                }
                ,styles:{
                    backgroundColor : (overlay.styles).line.color
                  }
              }
            ]
          }
        })

[koshak01]

cool )

,createPointFigures: ({ coordinates, bounding, precision, overlay, thousandsSeparator }) => {
            const { value = 0 } = (overlay.points)[0]
            return [
              {
                    type: 'line'
                  ,attrs: { coordinates: [coordinates[0], { x: bounding.width, y: coordinates[0].y }] }
              }
              ,{
                  type: 'text'
                , ignoreEvent: true
                , visible : true
                , attrs: {
                    x: bounding.width - 100,
                    y: coordinates[0].y,
                    text: klinecharts.utils.formatThousands(value.toFixed(precision.price), thousandsSeparator),
                    baseline: 'middle',
                }
                ,styles:{
                         borderStyle : (overlay.styles).line.style
                        ,borderColor : (overlay.styles).line.color
                        ,borderSize : (overlay.styles).line.size
                        ,style : 'stroke_fill'
                        ,color : 'black'
                        ,backgroundColor: 'white'
                  }
              }
            ]
          }

[koshak01]

i try any types, price label not view, she under YaXis panel ( (((

pleasy help

[koshak01]

I Register custom price line overlay!

ales good