Who are using klinecharts?

[liihuu]

Friends who use klinecharts are welcome to leave a message.

欢迎使用了klinecharts的朋友们留言。

[olablt]

I am using it for my private project.

[gldstrrbt]

Got excited today after coming across this, after having the most infuriating experience with a different react charting library that is no longer maintained and is poorly documented.

Currently in the process of testing it out to see if meets the needs of my project. Should it meet those needs, I'll definitely be switching over to this. So far it seems like it's much easier to maintain and requires little to no rewriting of basic features due to issues such as a glitched out date/x-axis and anti-aliasing.

Regardless of final decision, thank you so much for creating this library. It's only been a couple hours and it's been a pleasant experience. Feels like it's gonna save time and let me get back to coding my actual project rather than the library itself.

[sudoshu]

Been playing with this library in a hobby project, love the look, and it has been by far the easiest charting library to get up and running with minimal headaches. Here's a preview of what I'm using it for:

Trying to make something like ThinkOrSwim but for multiple brokers, both stock and crypto. Fully intend to keep the project open source and have plans for custom scripting (algo trading), company fundamentals lookup, social media sentiment analysis etc. Still working through the prototyping phase, but all in all this library is AWESOME!!!

Shameless plug here but if anyone wants to help out I most definitely could use the help: https://github.com/QuantStop/QuantStopTerminal

[voladelta]

Bybit exchange uses KlineChart without changing the font style.

[likeyou600]

Been playing with this library in a hobby project, love the look, and it has been by far the easiest charting library to get up and running with minimal headaches. Here's a preview of what I'm using it for:

Trying to make something like ThinkOrSwim but for multiple brokers, both stock and crypto. Fully intend to keep the project open source and have plans for custom scripting (algo trading), company fundamentals lookup, social media sentiment analysis etc. Still working through the prototyping phase, but all in all this library is AWESOME!!!

Shameless plug here but if anyone wants to help out I most definitely could use the help: https://github.com/QuantStop/QuantStopTerminal

Hello,I am interested in your vue website,Could you share this picture page,please ~
I only see welcome page in your project,
I want to learn how to build the shape tool
Thank you!!!

[sudoshu]

I want to learn how to build the shape tool

@likeyou600 I recently have been playing with github actions and refactoring the whole project, as such I removed a lot and basically started over again. I will get this all back soon hopefully but to answer your question those are just buttons that trigger the function call for the chart to draw a shape like so:

<!-- Drawing Tools -->
<div class="chart-tools-bar"  >
  <div class="icon-wrapper" v-on:click="setShapeType('horizontalStraightLine')">
    <svg viewBox="0 0 24 24">
      <rect x="5" y="11.5" width="14" height="1" rx="0.5"></rect>
      <ellipse cx="12" cy="12" rx="1.5" ry="1.5"></ellipse>
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('horizontalRayLine')">
    <svg viewBox="0 0 24 24">
      <rect x="4.5" y="11.5" width="15" height="1" rx="0.5"></rect>
      <ellipse cx="6" cy="12" rx="1.5" ry="1.5"></ellipse>
      <ellipse cx="13" cy="12" rx="1.5" ry="1.5"></ellipse>
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('horizontalSegment')">
    <svg viewBox="0 0 24 24">
      <rect x="5" y="11.5" width="14" height="1" rx="0.5"></rect>
      <ellipse cx="6" cy="12" rx="1.5" ry="1.5"></ellipse>
      <ellipse cx="18" cy="12" rx="1.5" ry="1.5"></ellipse>
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('verticalStraightLine')">
    <svg viewBox="0 0 24 24">
      <rect x="11.5" y="4" width="1" height="16" rx="0.5"></rect>
      <ellipse cx="12" cy="12" rx="1.5" ry="1.5"></ellipse>
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('verticalRayLine')">
    <svg viewBox="0 0 24 24">
      <rect x="11.5" y="4.5" width="1" height="15" rx="0.5"></rect>
      <ellipse cx="12" cy="18" rx="1.5" ry="1.5"></ellipse>
      <ellipse cx="12" cy="11" rx="1.5" ry="1.5"></ellipse>
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('verticalSegment')">
    <svg viewBox="0 0 24 24">
      <rect x="11.5" y="5" width="1" height="14" rx="0.5"></rect>
      <ellipse cx="12" cy="18" rx="1.5" ry="1.5"></ellipse>
      <ellipse cx="12" cy="6" rx="1.5" ry="1.5"></ellipse>
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('straightLine')">
    <svg viewBox="0 0 24 24">
      <rect x="5.989593505859375" y="17.303306579589844" width="16" height="1" rx="0.5"
            transform="matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-10.480973816180722,9.303303481670355)"
      ></rect>
      <ellipse cx="14" cy="10" rx="1.5" ry="1.5"></ellipse>
      <ellipse cx="10" cy="14" rx="1.5" ry="1.5"></ellipse>
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('rayLine')">
    <svg viewBox="0 0 24 24">
      <rect x="6.989593505859375" y="16.303314208984375" width="15" height="1" rx="0.5"
            transform="matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-9.480979210977239,9.71751925443823)"
      ></rect>
      <ellipse cx="13" cy="11" rx="1.5" ry="1.5"></ellipse><ellipse cx="8" cy="16" rx="1.5" ry="1.5"></ellipse>
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('segment')">
    <svg viewBox="0 0 24 24"><rect x="5.989593505859375" y="17.303298950195312" width="14" height="1" rx="0.5"
                                   transform="matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-10.480968421384205,9.30330124707234)"
    ></rect>
      <ellipse cx="16" cy="8" rx="1.5" ry="1.5"></ellipse>
      <ellipse cx="7" cy="17" rx="1.5" ry="1.5"></ellipse>
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('priceLine')">
    <svg viewBox="0 0 24 24">
      <rect x="4.5" y="13.5" width="15" height="1" rx="0.5"></rect>
      <ellipse cx="6" cy="14" rx="1.5" ry="1.5"></ellipse>
      <path d="M8.314036947998046,12.235949340820312L10.985912947998047,12.235949340820312L10.985912947998047,11.517199340820312L10.151922947998047,11.517199340820312L10.151922947998047,7.735949340820312L9.497632947998047,7.735949340820312C9.214422947998047,7.917589340820312,8.915602947998046,8.030869340820313,8.464427947998047,8.108999340820313L8.464427947998047,8.661729340820312L9.274972947998046,8.661729340820312L9.274972947998046,11.517199340820312L8.314036947998046,11.517199340820312L8.314036947998046,12.235949340820312ZM11.581612947998046,12.235949340820312L14.556222947998048,12.235949340820312L14.556222947998048,11.493759340820311L13.597242947998048,11.493759340820311C13.386302947998047,11.493759340820311,13.093332947998046,11.517199340820312,12.864822947998046,11.546499340820311C13.675362947998046,10.724229340820312,14.347242947998048,9.831649340820313,14.347242947998048,9.001579340820312C14.347242947998048,8.151969340820312,13.788642947998046,7.610949340820312,12.948802947998047,7.610949340820312C12.343332947998046,7.610949340820312,11.946852947998046,7.845329340820312,11.532782947998047,8.290639340820313L12.024972947998048,8.778919340820313C12.247632947998046,8.525009340820313,12.511302947998047,8.308219340820312,12.835522947998047,8.308219340820312C13.261302947998047,8.308219340820312,13.501532947998047,8.593369340820313,13.501532947998047,9.044539340820313C13.501532947998047,9.757429340820313,12.792552947998047,10.618759340820311,11.581612947998046,11.726179340820313L11.581612947998046,12.235949340820312ZM16.460522947998047,12.360949340820312C17.312082947998046,12.360949340820312,18.026902947998046,11.894149340820313,18.026902947998046,11.048449340820312C18.026902947998046,10.431259340820311,17.642162947998045,10.050399340820313,17.144112947998046,9.911729340820312L17.144112947998046,9.882429340820313C17.612862947998046,9.696889340820313,17.882402947998045,9.331649340820313,17.882402947998045,8.823839340820312C17.882402947998045,8.032829340820312,17.300362947998046,7.610949340820312,16.44294294799805,7.610949340820312C15.921462947998046,7.610949340820312,15.495682947998047,7.821889340820313,15.110912947998047,8.151969340820312L15.565992947998048,8.722279340820313C15.825752947998048,8.460559340820312,16.083572947998046,8.308219340820312,16.401922947998045,8.308219340820312C16.77888294799805,8.308219340820312,16.99568294799805,8.525009340820313,16.99568294799805,8.892199340820312C16.99568294799805,9.319929340820313,16.730052947998047,9.610949340820312,15.921462947998046,9.610949340820312L15.921462947998046,10.247669340820313C16.88044294799805,10.247669340820313,17.138252947998048,10.530869340820313,17.138252947998048,10.991809340820312C17.138252947998048,11.407829340820314,16.833572947998046,11.642199340820312,16.38239294799805,11.642199340820312C15.974192947998047,11.642199340820312,15.657782947998047,11.433219340820312,15.392162947998047,11.161729340820312L14.978102947998046,11.743759340820311C15.290602947998046,12.097279340820313,15.765212947998048,12.360949340820312,16.460522947998047,12.360949340820312Z"></path>
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('parallelStraightLine')">
    <svg viewBox="0 0 24 24">
      <rect x="7.989593505859375" y="20.303314208984375" width="16" height="1" rx="0.5"
            transform="matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-12.016513056401891,11.596198947183439)"
      ></rect>
      <rect x="3.4586830139160156" y="15.292892456054688" width="16" height="1" rx="0.5"
            transform="matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-9.800682931907204,6.924842852749634)"
      ></rect>
      <ellipse cx="16" cy="13" rx="1.5" ry="1.5"></ellipse>
      <ellipse cx="12" cy="17" rx="1.5" ry="1.5"></ellipse>
      <ellipse cx="9.5" cy="10" rx="1.5" ry="1.5"></ellipse>
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('priceChannelLine')">
    <svg viewBox="0 0 24 24">
      <rect x="5.989593505859375" y="17.303298950195312" width="16" height="1" rx="0.5"
            transform="matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-10.480968421384205,9.30330124707234)"
      ></rect>
      <rect x="5.031974792480469" y="13.607009887695312" width="12" height="1" rx="0.5"
            transform="matrix(0.7071067690849304,-0.7071067690849304,-0.7071067690849304,-0.7071067690849304,11.095440153447726,26.786762123917924)"
      ></rect>
      <rect x="11.40380859375" y="19.303298950195312" width="12" height="1" rx="0.5"
            transform="matrix(0.7071067690849304,-0.7071067690849304,-0.7071067690849304,-0.7071067690849304,16.98959169711361,41.016502553537975)"
      ></rect>
      <ellipse cx="14" cy="10" rx="1.5" ry="1.5"></ellipse>
      <ellipse cx="10" cy="14" rx="1.5" ry="1.5"></ellipse>
      <ellipse cx="15" cy="15" rx="1.5" ry="1.5"></ellipse>
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('fibonacciLine')">
    <svg viewBox="0 0 24 24">
      <rect x="4" y="6" width="16" height="1" rx="0.5"></rect>
      <rect x="4" y="9" width="16" height="1" rx="0.5"></rect>
      <rect x="4" y="15" width="16" height="1" rx="0.5"></rect>
      <rect x="4" y="18" width="16" height="1" rx="0.5"></rect>
      <rect x="4" y="12" width="16" height="1" rx="0.5"></rect>
      <ellipse cx="12" cy="18.5" rx="1.5" ry="1.5"></ellipse>
      <ellipse cx="16" cy="6.5" rx="1.5" ry="1.5"></ellipse>
      <ellipse cx="8" cy="6.5" rx="1.5" ry="1.5"></ellipse>
    </svg>
  </div>
  <hr class="divider"/>
  <div class="icon-wrapper" v-on:click="setShapeType('rect')">
    <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M5 3H3v2h2V3zm2 0h2v2H7V3zm6 0h-2v2h2V3zm2 0h2v2h-2V3zm4 0h2v2h-2V3zM3 7h2v2H3V7zm2 4H3v2h2v-2zm-2 4h2v2H3v-2zm2 4H3v2h2v-2zm2 0h2v2H7v-2zm6 0h-2v2h2v-2zm6-8h2v2h-2v-2zm2-4h-2v2h2V7zm-6 10v-2h6v2h-2v2h-2v2h-2v-4zm4 2v2h2v-2h-2z" />
    </svg>
  </div>
  <div class="icon-wrapper" v-on:click="setShapeType('circle')" style="padding: 2px;">
    <svg viewBox="0 0 59.94 59.94">
      <path d="M30.694,59.94c-1.078,0-1.967-0.857-1.998-1.941c-0.032-1.104,0.837-2.025,1.94-2.058c0.314-0.009,0.628-0.022,0.939-0.042
  c1.12-0.084,2.051,0.771,2.119,1.873c0.068,1.103-0.771,2.052-1.873,2.119c-0.354,0.021-0.711,0.037-1.068,0.048
  C30.733,59.94,30.714,59.94,30.694,59.94z M24.696,59.468c-0.121,0-0.244-0.011-0.368-0.034c-0.356-0.066-0.71-0.139-1.062-0.219
  c-1.077-0.245-1.752-1.317-1.507-2.394c0.245-1.077,1.319-1.751,2.394-1.507c0.301,0.068,0.604,0.131,0.907,0.188
  c1.086,0.202,1.803,1.246,1.6,2.332C26.481,58.796,25.64,59.468,24.696,59.468z M37.63,58.88c-0.872,0-1.673-0.574-1.923-1.455
  c-0.302-1.063,0.314-2.168,1.378-2.47c0.299-0.085,0.595-0.176,0.89-0.271c1.054-0.339,2.179,0.233,2.521,1.284
  c0.341,1.05-0.233,2.179-1.284,2.521c-0.342,0.111-0.687,0.216-1.034,0.314C37.995,58.855,37.81,58.88,37.63,58.88z M18.013,57.318
  c-0.284,0-0.572-0.061-0.847-0.188c-0.327-0.153-0.651-0.312-0.972-0.477c-0.982-0.506-1.369-1.712-0.863-2.693
  c0.505-0.981,1.711-1.368,2.693-0.863c0.275,0.142,0.555,0.278,0.837,0.41c1,0.468,1.432,1.659,0.964,2.659
  C19.486,56.892,18.765,57.318,18.013,57.318z M44.087,56.122c-0.688,0-1.356-0.354-1.729-0.991
  c-0.558-0.953-0.236-2.178,0.718-2.735c0.267-0.156,0.53-0.318,0.791-0.484c0.934-0.594,2.168-0.318,2.762,0.613
  c0.593,0.932,0.318,2.168-0.613,2.762c-0.304,0.193-0.61,0.381-0.922,0.563C44.777,56.034,44.429,56.122,44.087,56.122z
  M12.08,53.564c-0.449,0-0.9-0.15-1.273-0.458c-0.277-0.229-0.551-0.464-0.819-0.703c-0.825-0.734-0.898-1.998-0.163-2.823
  c0.732-0.824,1.998-0.899,2.823-0.163c0.231,0.206,0.468,0.407,0.708,0.605c0.852,0.704,0.971,1.965,0.268,2.816
  C13.227,53.317,12.655,53.564,12.08,53.564z M49.644,51.843c-0.514,0-1.026-0.196-1.417-0.589c-0.779-0.782-0.777-2.049,0.006-2.828
  c0.222-0.221,0.439-0.445,0.654-0.674c0.757-0.804,2.021-0.843,2.827-0.087c0.805,0.756,0.844,2.022,0.087,2.827
  c-0.244,0.26-0.493,0.516-0.746,0.768C50.666,51.649,50.155,51.843,49.644,51.843z M7.271,48.456c-0.617,0-1.227-0.284-1.618-0.821
  c-0.211-0.29-0.418-0.585-0.618-0.881c-0.617-0.916-0.376-2.159,0.539-2.777c0.917-0.618,2.159-0.376,2.777,0.539
  c0.173,0.257,0.351,0.511,0.534,0.762c0.65,0.893,0.455,2.144-0.438,2.795C8.093,48.331,7.679,48.456,7.271,48.456z M53.967,46.316
  c-0.349,0-0.701-0.091-1.022-0.282c-0.949-0.566-1.259-1.794-0.693-2.742c0.16-0.269,0.315-0.539,0.466-0.813
  c0.531-0.968,1.747-1.322,2.717-0.789c0.968,0.532,1.321,1.748,0.789,2.717c-0.174,0.315-0.353,0.627-0.536,0.935
  C55.311,45.968,54.648,46.316,53.967,46.316z M3.882,42.312c-0.797,0-1.549-0.479-1.86-1.265c-0.132-0.332-0.259-0.669-0.379-1.008
  c-0.369-1.041,0.175-2.185,1.216-2.554c1.039-0.369,2.184,0.174,2.554,1.216c0.104,0.294,0.214,0.584,0.328,0.873
  c0.407,1.026-0.096,2.188-1.123,2.596C4.376,42.266,4.127,42.312,3.882,42.312z M56.779,39.885c-0.186,0-0.374-0.026-0.562-0.081
  c-1.06-0.31-1.669-1.42-1.359-2.48c0.087-0.299,0.17-0.601,0.248-0.904c0.272-1.068,1.357-1.721,2.433-1.442
  c1.069,0.272,1.716,1.362,1.442,2.433c-0.088,0.347-0.184,0.691-0.283,1.035C58.443,39.318,57.645,39.885,56.779,39.885z
  M2.133,35.515c-0.992,0-1.853-0.738-1.981-1.748c-0.045-0.357-0.084-0.716-0.115-1.078c-0.097-1.101,0.718-2.07,1.818-2.166
  c1.122-0.112,2.07,0.719,2.166,1.818c0.027,0.31,0.061,0.617,0.1,0.922c0.139,1.096-0.637,2.097-1.732,2.236
  C2.302,35.51,2.217,35.515,2.133,35.515z M57.895,32.956c-0.023,0-0.047,0-0.071-0.001c-1.104-0.039-1.967-0.965-1.929-2.069
  c0.011-0.311,0.017-0.622,0.017-0.935v-0.113c0-1.104,0.896-2,2-2s2,0.896,2,2v0.113c0,0.359-0.006,0.718-0.019,1.075
  C59.855,32.106,58.968,32.956,57.895,32.956z M2.125,28.497c-0.082,0-0.164-0.005-0.247-0.015c-1.096-0.135-1.876-1.133-1.741-2.229
  c0.044-0.356,0.094-0.711,0.149-1.062c0.172-1.092,1.198-1.837,2.286-1.665c1.092,0.172,1.837,1.195,1.665,2.286
  c-0.048,0.308-0.092,0.617-0.13,0.929C3.982,27.754,3.12,28.497,2.125,28.497z M57.249,25.855c-0.918,0-1.745-0.636-1.951-1.57
  c-0.067-0.303-0.14-0.605-0.217-0.904c-0.278-1.069,0.363-2.161,1.433-2.438c1.072-0.28,2.161,0.364,2.438,1.433
  c0.091,0.348,0.175,0.697,0.252,1.051c0.237,1.078-0.444,2.146-1.523,2.383C57.536,25.84,57.391,25.855,57.249,25.855z M3.84,21.693
  c-0.242,0-0.49-0.045-0.729-0.14c-1.028-0.403-1.535-1.563-1.131-2.592c0.132-0.337,0.27-0.671,0.413-1
  c0.441-1.012,1.616-1.476,2.633-1.033c1.013,0.441,1.475,1.62,1.033,2.633c-0.124,0.284-0.242,0.571-0.356,0.861
  C5.393,21.211,4.638,21.693,3.84,21.693z M54.887,19.249c-0.732,0-1.438-0.402-1.788-1.101c-0.139-0.275-0.283-0.546-0.433-0.814
  c-0.536-0.966-0.188-2.184,0.778-2.72c0.966-0.534,2.183-0.187,2.72,0.778c0.175,0.315,0.345,0.635,0.507,0.957
  c0.497,0.987,0.1,2.189-0.887,2.686C55.496,19.18,55.189,19.249,54.887,19.249z M7.206,15.532c-0.406,0-0.815-0.123-1.17-0.379
  C5.14,14.505,4.94,13.255,5.587,12.36c0.211-0.292,0.428-0.58,0.65-0.865c0.682-0.871,1.938-1.022,2.808-0.343
  c0.87,0.681,1.023,1.938,0.343,2.808c-0.191,0.245-0.377,0.493-0.559,0.744C8.437,15.245,7.826,15.532,7.206,15.532z M50.95,13.445
  c-0.557,0-1.109-0.23-1.505-0.682c-0.205-0.233-0.413-0.461-0.625-0.686c-0.761-0.802-0.727-2.067,0.075-2.827
  s2.068-0.727,2.827,0.075c0.249,0.262,0.492,0.528,0.73,0.801c0.729,0.831,0.645,2.095-0.186,2.822
  C51.887,13.282,51.418,13.445,50.95,13.445z M12.002,10.404c-0.574,0-1.145-0.246-1.54-0.723C9.757,8.831,9.874,7.57,10.723,6.865
  c0.275-0.229,0.555-0.451,0.837-0.67c0.871-0.676,2.127-0.518,2.806,0.356c0.677,0.873,0.518,2.129-0.356,2.806
  c-0.247,0.191-0.491,0.387-0.731,0.586C12.904,10.253,12.452,10.404,12.002,10.404z M45.689,8.796c-0.389,0-0.781-0.113-1.126-0.349
  c-0.257-0.175-0.516-0.345-0.778-0.51c-0.936-0.588-1.217-1.823-0.629-2.758c0.588-0.936,1.825-1.217,2.758-0.629
  c0.306,0.192,0.607,0.39,0.905,0.594c0.912,0.623,1.146,1.867,0.523,2.779C46.956,8.492,46.328,8.796,45.689,8.796z M17.915,6.631
  c-0.749,0-1.468-0.423-1.81-1.146c-0.472-0.999-0.045-2.191,0.954-2.663c0.323-0.152,0.649-0.3,0.978-0.44
  c1.015-0.44,2.191,0.032,2.627,1.047c0.437,1.015-0.032,2.191-1.047,2.627c-0.285,0.123-0.568,0.251-0.849,0.384
  C18.492,6.57,18.201,6.631,17.915,6.631z M39.439,5.605c-0.225,0-0.453-0.038-0.676-0.119c-0.293-0.104-0.589-0.205-0.888-0.301
  c-1.052-0.336-1.633-1.461-1.297-2.514c0.336-1.052,1.459-1.634,2.514-1.297c0.344,0.109,0.685,0.226,1.022,0.348
  c1.04,0.373,1.58,1.519,1.206,2.558C41.028,5.096,40.26,5.605,39.439,5.605z M24.58,4.454c-0.941,0-1.78-0.667-1.963-1.626
  c-0.206-1.085,0.506-2.132,1.591-2.339c0.352-0.066,0.706-0.129,1.062-0.183c1.093-0.164,2.112,0.582,2.279,1.674
  s-0.582,2.112-1.674,2.279c-0.309,0.048-0.614,0.101-0.919,0.159C24.83,4.442,24.704,4.454,24.58,4.454z M32.59,4.076
  c-0.063,0-0.126-0.003-0.189-0.009c-0.309-0.029-0.618-0.053-0.931-0.07c-1.103-0.064-1.944-1.011-1.881-2.113
  c0.064-1.103,1.004-1.936,2.113-1.881c0.359,0.021,0.718,0.049,1.073,0.082c1.1,0.104,1.907,1.079,1.804,2.179
  C34.481,3.299,33.61,4.076,32.59,4.076z"
      />
    </svg>
  </div>
  <hr class="divider"/>
  <div class="icon-wrapper" v-on:click="removeAllShape()">
    <svg viewBox="0 0 1024 1024" style="width: 34px; height: 34px;">
      <path d="M256 333.872a28.8 28.8 0 0 1 28.8 28.8V768a56.528 56.528 0 0 0 56.544 56.528h341.328A56.528 56.528 0 0 0 739.2 768V362.672a28.8 28.8 0 0 1 57.6 0V768a114.128 114.128 0 0 1-114.128 114.128H341.328A114.128 114.128 0 0 1 227.2 768V362.672a28.8 28.8 0 0 1 28.8-28.8zM405.344 269.648a28.8 28.8 0 0 0 28.8-28.8 56.528 56.528 0 0 1 56.528-56.544h42.656a56.528 56.528 0 0 1 56.544 56.544 28.8 28.8 0 0 0 57.6 0 114.128 114.128 0 0 0-112.64-114.128h-45.648a114.144 114.144 0 0 0-112.64 114.128 28.8 28.8 0 0 0 28.8 28.8z"></path>
      <path d="M163.2 266.672a28.8 28.8 0 0 1 28.8-28.8h640a28.8 28.8 0 0 1 0 57.6H192a28.8 28.8 0 0 1-28.8-28.8zM426.672 371.2a28.8 28.8 0 0 1 28.8 28.8v320a28.8 28.8 0 0 1-57.6 0V400a28.8 28.8 0 0 1 28.8-28.8zM597.344 371.2a28.8 28.8 0 0 1 28.8 28.8v320a28.8 28.8 0 0 1-57.6 0V400a28.8 28.8 0 0 1 28.8-28.8z"></path>
    </svg>
  </div>
</div>

and the function to call the chart api:

setShapeType: function (shapeName) {
    this.kLineChart.createShape(shapeName)
}

[likeyou600]

I want to learn how to build the shape tool

@likeyou600 I recently have been playing with github actions and refactoring the whole project, as such I removed a lot and basically started over again. I will get this all back soon hopefully but to answer your question those are just buttons that trigger the function call for the chart to draw a shape like so:

@sudoshu You did me a great favor!!! Thank you!

[xintains]

I am using it for my private project.

hi guys,Could you please share with me your technical index algorithm, cvd, delta and fixed range volume? Thank you

[haydar-can]

Indicator properties parameters should be more customizable.

[oneart-dev]

Our project switched from old tvjs chart to KlineCharts after quite a bit of work to fix blur issue and other small issues it looks quite nice and perform well.

[xtrmus]

Our project switched from old tvjs chart to KlineCharts after quite a bit of work to fix blur issue and other small issues it looks quite nice and perform well.

Could you share the codes of the RR system? And tooltipicon edit, remove functions?

[oneart-dev]

@xtrmus tooltip built in klinechart-pro.

RR overlay

import { OverlayTemplate, OverlayFigure, LineType } from 'klinecharts';

const LongPosition: OverlayTemplate = {
  name: 'longPosition',
  totalStep: 4,
  needDefaultPointFigure: true,
  needDefaultXAxisFigure: false,
  needDefaultYAxisFigure: false,
  performEventPressedMove: ({ points, performPointIndex }) => {
    console.log('performEventPressedMove', points);
    if (points.length < 3) return;

    if (performPointIndex === 0) {
      if (points[0].value > points[1].value) {
        points[0].value = points[1].value - points[1].value * 0.01;
      }

      if (points[0].value < points[2].value) {
        points[0].value = points[2].value + points[2].value * 0.01;
      }
    }

    if (performPointIndex === 1) {
      if (points[1].value < points[0].value) {
        points[1].value = points[0].value + points[0].value * 0.01;
      }
      points[2].timestamp = points[1].timestamp;
      points[2].dataIndex = points[1].dataIndex;
    }

    if (performPointIndex === 2) {
      if (points[2].value > points[0].value) {
        points[2].value = points[0].value - points[0].value * 0.01;
      }
      points[1].timestamp = points[2].timestamp;
      points[1].dataIndex = points[2].dataIndex;
    }
  },
  performEventMoveForDrawing: ({
    currentStep,
    points,
    performPoint,
    performPointIndex,
  }) => {
    if (points.length < 2) return;

    if (performPointIndex === 1) {
      if (points[1].value < points[0].value) {
        points[1].value = points[0].value + points[0].value * 0.01;
      }
    }

    if (performPointIndex === 2) {
      if (points[2].value > points[0].value) {
        points[2].value = points[0].value - points[0].value * 0.01;
      }
      points[1].timestamp = points[2].timestamp;
      points[1].dataIndex = points[2].dataIndex;
    }
  },
  createPointFigures: ({
    coordinates,
    bounding,
    overlay,
    defaultStyles,
    precision,
    thousandsSeparator,
    barSpace,
    yAxis,
    xAxis,
  }) => {
    if (coordinates.length < 2) return [];

    const figures: OverlayFigure[] = [];
    const { arrowLineColor, fillColor, rectColor, rectTextColor } =
      defaultStyles['ruler'];

    const x = coordinates[0].x;
    const y = coordinates[0].y;
    const width = coordinates[1].x - coordinates[0].x;
    const height = coordinates[1].y - coordinates[0].y;
    const price1 = yAxis?.convertFromPixel(y);
    const price2 = yAxis?.convertFromPixel(coordinates[1].y);
    const diff = price2 - price1;
    const diffPercent = diff / (price1 / 100);
    let diffPercent2 = 0;
    let riskRewardRatio = '';
    if (coordinates.length > 2) {
      const price3 = yAxis?.convertFromPixel(coordinates[2].y);
      const diff2 = price3 - price1;
      diffPercent2 = diff2 / (price1 / 100);
      riskRewardRatio = `R/R: ${(diffPercent / diffPercent2 * -1).toFixed(2)}:1`;
    }

    figures.push({
      key: 'green-bg',
      type: 'rect',
      styles: {
        color: 'rgba(0,255,0,0.1)',
      },
      attrs: {
        x,
        y,
        width,
        height,
      },
    });

    figures.push({
      key: 'position',
      type: 'text',
      ignoreEvent: true,
      attrs: {
        x: x + width / 2,
        y: coordinates[1].y - 12,
        text: `${diffPercent.toFixed(2)}% ${riskRewardRatio}`,
        align: 'center',
      },
      styles: {
        size: 12,
        font: 'Roboto',
        color: defaultStyles['position'].color,
      },
    });

    figures.push({
      key: 'line',
      type: 'line',
      styles: {
        color: 'rgba(0,0,0,0.1)',
      },
      attrs: {
        coordinates: [
          { x, y },
          { x: coordinates[1].x, y },
        ],
      },
    });

    if (coordinates.length > 2) {
      figures.push({
        key: 'red-bg',
        type: 'rect',
        styles: {
          color: 'rgba(255,0,0,0.1)',
        },
        attrs: {
          x: coordinates[0].x,
          y: coordinates[0].y,
          width: coordinates[2].x - coordinates[0].x,
          height: coordinates[2].y - coordinates[0].y,
        },
      });

      figures.push({
        key: 'position',
        type: 'text',
        ignoreEvent: true,
        attrs: {
          x: x + width / 2,
          y: coordinates[2].y + 5,
          text: `${diffPercent2.toFixed(2)}%`,
          align: 'center',
        },
        styles: {
          size: 12,
          font: 'Roboto',
          color: defaultStyles['position'].color,
        },
      });
    }

    return figures;
  },
};

export default LongPosition;