olablt
commented
2 years ago I am using it for my private project.
Open liihuu opened 2 years ago
olablt
commented
2 years ago I am using it for my private project.
gldstrrbt
commented
2 years ago 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
commented
2 years ago 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
commented
2 years ago Bybit exchange uses KlineChart without changing the font style.
likeyou600
commented
2 years ago 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
commented
2 years ago 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)
}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
commented
1 year ago 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
commented
1 year ago 
Indicator properties parameters should be more customizable.
oneart-dev
commented
1 year ago 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
commented
1 year ago 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
commented
1 year ago @xtrmus tooltip built in klinechart-pro.
xtrmus
commented
1 year ago 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.
I know I'm asking for too much. Please don't mind me. Is it possible for you to share the ruler and the price overlay above it?
dbof10
commented
5 months ago I am using it for my private project.
can you share some code or ideas on volume profile? @olablt
adetoola
commented
1 month ago 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 Did this screenshot use the klinechart library, please? If it did, can you tell me how you implemented the Profit/Loss Indicator (R:R) or give me some pointers? I have looked at the documentation and couldn't get it to work. Thanks
Go-Quant
commented
1 month ago
欢迎使用了klinecharts的朋友们留言。