Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Nov 23 15:15
    FNOTrader-com opened #801
  • Oct 28 05:14
    AmalRichwin-AT opened #800
  • Oct 20 10:52
    kalitsinskiy opened #799
  • Oct 20 10:45
    kalitsinskiy opened #798
  • Sep 20 20:45

    dependabot[bot] on npm_and_yarn


  • Sep 20 20:45
    dependabot[bot] closed #794
  • Sep 20 20:45
    dependabot[bot] commented #794
  • Sep 20 20:45
    dependabot[bot] labeled #797
  • Sep 20 20:45

    dependabot[bot] on npm_and_yarn

    Bump prismjs from 1.8.4 to 1.25… (compare)

  • Sep 20 20:45
    dependabot[bot] opened #797
  • Sep 13 01:58
    gldstrrbt commented #678
  • Sep 05 16:16
    gldstrrbt commented #678
  • Aug 12 00:02
    chromafunk commented #796
  • Aug 11 23:51
    chromafunk opened #796
  • Aug 11 23:48
    chromafunk commented #670
  • Aug 08 21:08
    eliobricenov commented #790
  • Jul 30 11:13
    t0x1c3500 closed #795
  • Jul 30 10:43
    t0x1c3500 opened #795
  • Jul 14 18:09
    somguyth commented #335
  • Jun 28 18:34

    dependabot[bot] on npm_and_yarn


hi, I am new to react and new to stockchart library as well. Is there anyway to remove the Type DropDown ?
Ragu Ramaswamy
you have to remove the TypeChooser from the examples
if I am setting connectNulls to true it is having no effect
line is still displayed with breaks
Is there anyone therE?
@Pa22 any issues?
Yes, In assembling the chart
Iwant to have this chart but I don't know wherecould I find his file where ar scrips are together
Hey everyone! A bit tired looking for the info, can someone point me - how can I put custom svg on chart? I don't want to use annotations since locations of those icons are based on data structure separate from chart's dataset. It seems that i need to use chats xScale() and yScale() to calculate onscreen svg coordinates, but how do i get those scale function from chart before constructing my svg?
(I'm using continuous time scale)
Just to test - i've tried this in my react component:
var xScale=scaleTime();
return (<text x={xScale(new Date(endTime))} y={150} fill="white">AAAAAAAAAAAAAAAAAAA</text>)
this component is then used inside chart
and AAAAAAAAAAA is nowhere to be seen. It's visible though if i just hardcode 150 instead of x
and i have no clue how to get yScale
Thanks in advance
In case this is an XY problem - what essentially i'm trying to do - put some svg icons onto candlestick chart given time and price coordinate that icon should be located at.
Also can someone look at that issue: rrag/react-stockcharts#737
I still have no clue how to make it adjust automatically, I can make a map for possible timeframes to use different d3-time function (utcDay, utcMinute e.t.c) but then how would i handle 30min timeframe for ex?
Ok nvm that issue, i've worked around it, anow only interestedd in how to place those svg icons/text at custom coordinates
So back to my question, i've made a simple component
class SingleTextAnnotation extends Component {
    constructor(props) {
        this.renderSVG = this.renderSVG.bind(this);
        this.saveNode = this.saveNode.bind(this);
    renderSVG(moreProps) {    
        var props = this.props;    
        var { xScale, chartConfig: { yScale } } = moreProps;

        if ((!props.x && props.x !== 0) || (!props.y && props.y !== 0)) return null;        

        return (            
            <text className="single_text_annotation" x={xScale(props.x)} y={yScale(props.y)-5} fill={props.fill}>{props.text}</text>);
    saveNode(node) {
        this.node = node;
    render() {
        var self = this;        

        return (
            <GenericChartComponent ref={self.saveNode}
Seems to be working, but I'm having a hard time figuring out how to make the text clickable, any clues?
Will still appreciate some response :)
btw for anyone interested - that code snippet i posted above was lagging like hell, I had to implement canvasDraw method which works much much faster than svgDraw, don't want to flood here with additional code, but if you need it ping me, or just look up https://github.com/rrag/react-stockcharts/blob/master/src/lib/interactive/components/StraightLine.js - that's what I used as an example of building component.
Hello everyone, I got problem with disable select and edit trending line. I don't know how to disable it, I tried to disable DrawingObjectSelector but it doesn't help. Is there anyway to disable select or edit trending line? Thanks
Olmeca DEX
Hi, anyone have source code of depth charts and how to fetch?

Hey @bnnhoc if you need to display predefined trendlines that are not selectable nor editable - you can use straightLine

import StraightLine from "react-stockcharts/lib/interactive/components/StraightLine";

You can look up it's parameters in the imported file.
If you're still interested and can't figure it out - ping me.

@OlmecaD_twitter you should be able to find everything in git repo, but to be hones I don't know which depth chart do you mean.
hi Sorry for the bad English. There is a way to display a regular browser contextmenu when right-clicking ???
I need it very, very much . so much tnx for any help
context menu noting show when i right clicking on chart :-(

Hello, first of all I want to thank you @rrag for this amazing library! :) Thank you.
Please I am trying to render Candle stick chart with "annotations" as same as here: http://rrag.github.io/react-stockcharts-next/documentation.html#/ma_crossover_using_svg_shape

I have already done a RSI indicator in chart and next step is to add marks, where stock bot got sell and buy signals. But I can not get it work...
The console is clear and all seems to be working but no annotations are showing. Is here someone with same experience? Do I have to set some special props? Please, help. I am not able to solve it for one and half day and its killing me.


My component: https: chart Component

Screenshot: screen

I am using some 5Min data and I am facing the following issue :

The candles are all red and it looks like they are squeezed. I used one of the exampels as templates (EMA cross over) and just changed the date format. Is there anything else I need to change?

Ricardo Lamadrid
@rrag hello, im trying to use the library because it looks great but cant get it to work with alphaadvantage api... imfinding difficulty figuring out how to make the the data work.
Zakaria Boualaid
Is it possible to customize Y for the CrossHairCursor? I want to make the horizontal line of the cross hair snaps with the last / close price instead of following the mouseX.
Arturo Gamboa Rodriguez
hey guys how can i go to a specific date?
Nikita Voloshchuk
When I update the data of Chart, how can I keep current zoom and position of chart?
hi. i am having same issue. but i can update a single candle without resetting zoom/position. whenever i add new candle in data zoom/postion changes.
Minh Kha
is there any one know how to get the tick values ?
hi. how can I assign yExtents depends on all indicators and chart type the user selected ?
Hello, I hope this is the right place for my question. The "Equidistant Channel" can be drawn with the mouse in react-stockcharts.
Can I draw it programmatically? (like the image below, but programmatically)
I am trying to find ranges programmatically and then draw channels based on detected ranges. I appreciate any help you can provide.
Screen Shot 2021-06-05 at 6.51.45 PM.png
Hi everyone