简体   繁体   中英

React Google Charts Candlestick colors and wicks not displaying

I am trying to implement the React Google Charts candlestick charts, and I am plugging in my own data into the charts but when the charts are displayed, the candlesticks are all being displayed in one color at a time even when I change the color options.

options={{
        legend: "none",
        bar: { groupWidth: "100%" }, // Remove space between bars.
        candlestick: {
          fallingColor: { strokeWidth: 0, fill: "#a52714" }, // red
          risingColor: { strokeWidth: 0, fill: "#0f9d58" } // green
        }
      }}

I am almost certain my data is shaped correctly (this is the ordered_data array of arrays passed to the charts data property.

  data={this.state.ordered_data}

The wicks are also not displaying on the charts even though my data fits into the same shape as the default example data.

I am linking to a codesandbox showing my charts.

The chart without any wicks and with all candles with the same color looks as shown below在此处输入图像描述

The codesandbox with the code for the chart is embedded below. Here's the official example for using this chart: React Google Charts candlestick . I've tried to customize the colors using the options fallingColor and risingColor settings to no avail. How can I get the wicks to display?

You can view the shape of my data from the console in the codesandbox.

 <iframe src="https://codesandbox.io/embed/charming-oskar-15lkf?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="charming-oskar-15lkf" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>

looking at the code sandbox and the data in the console,
it looks as though your data is structured as follows...

"day", "open", "high", "low", "close"

but according to the data format for Google's Candlestick Chart,
the data should be structured as follows...

"day", "low", "open", "close", "high"

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM