Multiple lines over google candlestick chart by react

Question

I'm trying to create a candle chart with multiple linee on the same chart with react-google-charts. But when I try this is the output:

But this is the graph I would like:

this is the code that i have used:

<Chart
        width={"500px"}
        height={"300px"}
        chartType="ComboChart"
        loader={<div>Loading Chart</div>}
        data={[
          ["day", "a", "b", "c", "d", "Medium", "medium2"],
          ["2004/05", 165, 938, 522, 998, 450, 614.6],
          ["2005/06", 135, 1120, 599, 1268, 288, 682],
          ["2006/07", 157, 1167, 587, 807, 397, 623],
          ["2007/08", 139, 1110, 615, 968, 215, 609.4],
          ["2008/09", 136, 691, 629, 1026, 366, 569.6],
        ]}
        options={{
          seriesType: "CandlestickChart",
          series: {
            1: { type: "line" },
          },
        }}
      />

These are the links I have already used to make this version of the program:

This is the project:

https://codesandbox.io/s/peaceful-benz-ldjzu?file=/src/App.js

Is there anyone who can tell me what I did wrong with my program?

score 1 · Accepted Answer · answered Jun 24 '21 at 09:53

OK I was able to find the solution to my problem.This is the solution:

<Chart
    width={"500px"}
    height={"300px"}
    chartType="CandlestickChart"
    loader={<div>Loading Chart</div>}
    data={[
      ["day", "a", "b", "c", "d", "Medium", "medium2"],
      ["2004/05", 0, 0, 40, 40, 450, 614.6],
      ["2005/06", 135, 1120, 599, 1268, 288, 682],
      ["2006/07", 157, 1167, 587, 807, 397, 623],
      ["2007/08", 139, 1110, 615, 968, 215, 609.4],
      ["2008/09", 136, 691, 629, 1026, 366, 569.6]
    ]}
    options={{
      series: {
        1: { type: "line" },
        2: { type: "line" }
      }
    }}
  />

the problem is that I was using ComboChart but in this case I don't really understand why it didn't work. Using CandlestickChart it works.

my code:

https://codesandbox.io/s/white-tree-2fsy6?file=/src/App.js:139-765

Multiple lines over google candlestick chart by react

1 Answers1