How can i change the format of my candlestick chart in chart.js?

I am using vite and react to build a node.js program where I am collecting data from coinbase exchange API to rebuild a dashboard. This is my code, where the API returns: an array of arrays of the form [timestamp, price_low, price_high, price_open, price_close].

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<code>import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { getProductCandles } from "../api/api";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
TimeScale,
Tooltip,
Title,
Legend,
elements,
} from "chart.js";
import {
CandlestickController,
CandlestickElement,
} from "chartjs-chart-financial";
import { Chart } from "react-chartjs-2";
import "chartjs-adapter-date-fns";
// Register necessary components for the candlestick chart
ChartJS.register(
CategoryScale,
LinearScale,
TimeScale,
Tooltip,
Title,
Legend,
CandlestickController,
CandlestickElement
);
const ProductPage = () => {
const { productId } = useParams();
const [data, setData] = useState([0, 0, 0, 0, 0]);
const [granularity, setGranularity] = useState(3600);
useEffect(() => {
const fetchData = async () => {
const end = new Date().toISOString();
const start = new Date(
new Date().setDate(new Date().getDate() - 1)
).toISOString();
try {
const candleData = await getProductCandles(
productId,
granularity,
start,
end
);
setData(candleData);
} catch (error) {
console.error("Error fetching candle data:", error);
}
};
fetchData(); // Call the fetchData function
}, [productId, granularity]);
const array = data.map((d) => ({
x: new Date(d[0] * 1000),
l: d[1],
h: d[2],
o: d[3],
c: d[4],
}));
console.log(data);
console.log("array = ", array);
const chartData = {
datasets: [
{
label: "Price",
data: array,
borderColor: "rgba(75, 192, 192, 1)",
borderWidth: 1,
fill: false,
barWidth: 0.8,
},
],
};
const options = {
scales: {
x: {
title: {
display: true,
text: "Time",
},
type: "time",
time: {
unit: "hour",
stepSize: 1,
displayFormats: {
hour: "MMM DD",
},
},
},
y: {
beginAtZero: false,
},
},
};
return (
<div
className="page"
style={{ width: "100vw", height: "80vh", margin: "0 auto" }}
>
<h1 className="text-2xl font-bold">Stock Prices</h1>
<div style={{ height: "100%", width: "100%" }}>
<Chart type="candlestick" data={chartData} options={options} />
</div>
</div>
);
};
export default ProductPage;
</code>
<code>import React, { useState, useEffect } from "react"; import { useParams } from "react-router-dom"; import { getProductCandles } from "../api/api"; import { Chart as ChartJS, CategoryScale, LinearScale, TimeScale, Tooltip, Title, Legend, elements, } from "chart.js"; import { CandlestickController, CandlestickElement, } from "chartjs-chart-financial"; import { Chart } from "react-chartjs-2"; import "chartjs-adapter-date-fns"; // Register necessary components for the candlestick chart ChartJS.register( CategoryScale, LinearScale, TimeScale, Tooltip, Title, Legend, CandlestickController, CandlestickElement ); const ProductPage = () => { const { productId } = useParams(); const [data, setData] = useState([0, 0, 0, 0, 0]); const [granularity, setGranularity] = useState(3600); useEffect(() => { const fetchData = async () => { const end = new Date().toISOString(); const start = new Date( new Date().setDate(new Date().getDate() - 1) ).toISOString(); try { const candleData = await getProductCandles( productId, granularity, start, end ); setData(candleData); } catch (error) { console.error("Error fetching candle data:", error); } }; fetchData(); // Call the fetchData function }, [productId, granularity]); const array = data.map((d) => ({ x: new Date(d[0] * 1000), l: d[1], h: d[2], o: d[3], c: d[4], })); console.log(data); console.log("array = ", array); const chartData = { datasets: [ { label: "Price", data: array, borderColor: "rgba(75, 192, 192, 1)", borderWidth: 1, fill: false, barWidth: 0.8, }, ], }; const options = { scales: { x: { title: { display: true, text: "Time", }, type: "time", time: { unit: "hour", stepSize: 1, displayFormats: { hour: "MMM DD", }, }, }, y: { beginAtZero: false, }, }, }; return ( <div className="page" style={{ width: "100vw", height: "80vh", margin: "0 auto" }} > <h1 className="text-2xl font-bold">Stock Prices</h1> <div style={{ height: "100%", width: "100%" }}> <Chart type="candlestick" data={chartData} options={options} /> </div> </div> ); }; export default ProductPage; </code>
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { getProductCandles } from "../api/api";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  TimeScale,
  Tooltip,
  Title,
  Legend,
  elements,
} from "chart.js";
import {
  CandlestickController,
  CandlestickElement,
} from "chartjs-chart-financial";
import { Chart } from "react-chartjs-2";
import "chartjs-adapter-date-fns";

// Register necessary components for the candlestick chart
ChartJS.register(
  CategoryScale,
  LinearScale,
  TimeScale,
  Tooltip,
  Title,
  Legend,
  CandlestickController,
  CandlestickElement
);

const ProductPage = () => {
  const { productId } = useParams();
  const [data, setData] = useState([0, 0, 0, 0, 0]);
  const [granularity, setGranularity] = useState(3600);

  useEffect(() => {
    const fetchData = async () => {
      const end = new Date().toISOString();
      const start = new Date(
        new Date().setDate(new Date().getDate() - 1)
      ).toISOString();
      try {
        const candleData = await getProductCandles(
          productId,
          granularity,
          start,
          end
        );
        setData(candleData);
      } catch (error) {
        console.error("Error fetching candle data:", error);
      }
    };

    fetchData(); // Call the fetchData function
  }, [productId, granularity]);

  const array = data.map((d) => ({
    x: new Date(d[0] * 1000),
    l: d[1],
    h: d[2],
    o: d[3],
    c: d[4],
  }));

  console.log(data);
  console.log("array = ", array);

  const chartData = {
    datasets: [
      {
        label: "Price",
        data: array,
        borderColor: "rgba(75, 192, 192, 1)",
        borderWidth: 1,
        fill: false,
        barWidth: 0.8,
      },
    ],
  };
  const options = {
    scales: {
      x: {
        title: {
          display: true,
          text: "Time",
        },
        type: "time",
        time: {
          unit: "hour",
          stepSize: 1,
          displayFormats: {
            hour: "MMM DD",
          },
        },
      },
      y: {
        beginAtZero: false,
      },
    },
  };

  return (
    <div
      className="page"
      style={{ width: "100vw", height: "80vh", margin: "0 auto" }}
    >
      <h1 className="text-2xl font-bold">Stock Prices</h1>
      <div style={{ height: "100%", width: "100%" }}>
        <Chart type="candlestick" data={chartData} options={options} />
      </div>
    </div>
  );
};

export default ProductPage;

The chart ends up looking like this

API returns:

  1. Array(24)

    1. 0: (6) [1717596000, 0.7071, 0.7129, 0.7102, 0.7127, 205255.5]

    2. 1: (6) [1717592400, 0.7088, 0.713, 0.7123, 0.71, 179778.4]

    3. 2: (6) [1717588800, 0.7112, 0.7149, 0.7145, 0.7122, 204489.5]

    4. 3: (6) [1717585200, 0.7126, 0.7149, 0.7133, 0.7144, 85185.7]

    5. 4: (6) [1717581600, 0.7124, 0.7146, 0.714, 0.7131, 178411.5]

    6. 5: (6) [1717578000, 0.7124, 0.716, 0.7143, 0.7137, 207845.7]

    7. 6: (6) [1717574400, 0.714, 0.7182, 0.7181, 0.7144, 172882.4]

    8. 7: (6) [1717570800, 0.7169, 0.7202, 0.7193, 0.7175, 137006.6]

    9. 8: (6) [1717567200, 0.7166, 0.7215, 0.7171, 0.7196, 319441.8]

    10. 9: (6) [1717563600, 0.7136, 0.7174, 0.7171, 0.717, 170088.6]

    11. 10: (6) [1717560000, 0.714, 0.7178, 0.7174, 0.7171, 195534.8]

    12. 11: (6) [1717556400, 0.715, 0.7178, 0.7152, 0.7171, 122120.9]

    13. 12: (6) [1717552800, 0.7142, 0.7185, 0.7184, 0.7152, 208780.8]

    14. 13: (6) [1717549200, 0.7154, 0.7199, 0.7163, 0.7184, 274857.9]

    15. 14: (6) [1717545600, 0.7144, 0.7183, 0.7155, 0.7168, 75366.8]

    16. 15: (6) [1717542000, 0.7136, 0.716, 0.7146, 0.7152, 106694.8]

    17. 16: (6) [1717538400, 0.7122, 0.7153, 0.7145, 0.7146, 137940.1]

    18. 17: (6) [1717534800, 0.7116, 0.7147, 0.7139, 0.7144, 147603.1]

    19. 18: (6) [1717531200, 0.7114, 0.7146, 0.7139, 0.7137, 297552.5]

    20. 19: (6) [1717527600, 0.7094, 0.7168, 0.7168, 0.7139, 280444.1]

    21. 20: (6) [1717524000, 0.7152, 0.7195, 0.7156, 0.7164, 158904.1]

    22. 21: (6) [1717520400, 0.7116, 0.7159, 0.7137, 0.7152, 206150.3]

    23. 22: (6) [1717516800, 0.7118, 0.715, 0.7136, 0.7137, 189808.8]

    24. 23: (6) [1717513200, 0.7098, 0.7157, 0.7116, 0.7134, 247950.2]

    25. length: 24

Mapping function output:

  1. array = Array(24)

    1. 0: {x: Wed Jun 05 2024 15:00:00 GMT+0100 (British Summer Time), l: 0.7071, h: 0.7129, o: 0.7102, c: 0.7127}

    2. 1: {x: Wed Jun 05 2024 14:00:00 GMT+0100 (British Summer Time), l: 0.7088, h: 0.713, o: 0.7123, c: 0.71}

    3. 2: {x: Wed Jun 05 2024 13:00:00 GMT+0100 (British Summer Time), l: 0.7112, h: 0.7149, o: 0.7145, c: 0.7122}

    4. 3: {x: Wed Jun 05 2024 12:00:00 GMT+0100 (British Summer Time), l: 0.7126, h: 0.7149, o: 0.7133, c: 0.7144}

    5. 4: {x: Wed Jun 05 2024 11:00:00 GMT+0100 (British Summer Time), l: 0.7124, h: 0.7146, o: 0.714, c: 0.7131}

    6. 5: {x: Wed Jun 05 2024 10:00:00 GMT+0100 (British Summer Time), l: 0.7124, h: 0.716, o: 0.7143, c: 0.7137}

    7. 6: {x: Wed Jun 05 2024 09:00:00 GMT+0100 (British Summer Time), l: 0.714, h: 0.7182, o: 0.7181, c: 0.7144}

    8. 7: {x: Wed Jun 05 2024 08:00:00 GMT+0100 (British Summer Time), l: 0.7169, h: 0.7202, o: 0.7193, c: 0.7175}

    9. 8: {x: Wed Jun 05 2024 07:00:00 GMT+0100 (British Summer Time), l: 0.7166, h: 0.7215, o: 0.7171, c: 0.7196}

    10. 9: {x: Wed Jun 05 2024 06:00:00 GMT+0100 (British Summer Time), l: 0.7136, h: 0.7174, o: 0.7171, c: 0.717}

    11. 10: {x: Wed Jun 05 2024 05:00:00 GMT+0100 (British Summer Time), l: 0.714, h: 0.7178, o: 0.7174, c: 0.7171}

    12. 11: {x: Wed Jun 05 2024 04:00:00 GMT+0100 (British Summer Time), l: 0.715, h: 0.7178, o: 0.7152, c: 0.7171}

    13. 12: {x: Wed Jun 05 2024 03:00:00 GMT+0100 (British Summer Time), l: 0.7142, h: 0.7185, o: 0.7184, c: 0.7152}

    14. 13: {x: Wed Jun 05 2024 02:00:00 GMT+0100 (British Summer Time), l: 0.7154, h: 0.7199, o: 0.7163, c: 0.7184}

    15. 14: {x: Wed Jun 05 2024 01:00:00 GMT+0100 (British Summer Time), l: 0.7144, h: 0.7183, o: 0.7155, c: 0.7168}

    16. 15: {x: Wed Jun 05 2024 00:00:00 GMT+0100 (British Summer Time), l: 0.7136, h: 0.716, o: 0.7146, c: 0.7152}

    17. 16: {x: Tue Jun 04 2024 23:00:00 GMT+0100 (British Summer Time), l: 0.7122, h: 0.7153, o: 0.7145, c: 0.7146}

    18. 17: {x: Tue Jun 04 2024 22:00:00 GMT+0100 (British Summer Time), l: 0.7116, h: 0.7147, o: 0.7139, c: 0.7144}

    19. 18: {x: Tue Jun 04 2024 21:00:00 GMT+0100 (British Summer Time), l: 0.7114, h: 0.7146, o: 0.7139, c: 0.7137}

    20. 19: {x: Tue Jun 04 2024 20:00:00 GMT+0100 (British Summer Time), l: 0.7094, h: 0.7168, o: 0.7168, c: 0.7139}

    21. 20: {x: Tue Jun 04 2024 19:00:00 GMT+0100 (British Summer Time), l: 0.7152, h: 0.7195, o: 0.7156, c: 0.7164}

    22. 21: {x: Tue Jun 04 2024 18:00:00 GMT+0100 (British Summer Time), l: 0.7116, h: 0.7159, o: 0.7137, c: 0.7152}

    23. 22: {x: Tue Jun 04 2024 17:00:00 GMT+0100 (British Summer Time), l: 0.7118, h: 0.715, o: 0.7136, c: 0.7137}

    24. 23: {x: Tue Jun 04 2024 16:00:00 GMT+0100 (British Summer Time), l: 0.7098, h: 0.7157, o: 0.7116, c: 0.7134}

    25. length: 24

I’ve tried changing the options of the chart such as bar width but it doesn’t change the way the graph looks. Is this an issue with the data or my code for the chart? I would like the graph to look like a traditional candlestick chart with the candlesticks being thin enough that you can tell them apart.

Here is an example:

Example candlestick chart

Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa Dịch vụ tổ chức sự kiện 5 sao Thông tin về chúng tôi Dịch vụ sinh nhật bé trai Dịch vụ sinh nhật bé gái Sự kiện trọn gói Các tiết mục giải trí Dịch vụ bổ trợ Tiệc cưới sang trọng Dịch vụ khai trương Tư vấn tổ chức sự kiện Hình ảnh sự kiện Cập nhật tin tức Liên hệ ngay Thuê chú hề chuyên nghiệp Tiệc tất niên cho công ty Trang trí tiệc cuối năm Tiệc tất niên độc đáo Sinh nhật bé Hải Đăng Sinh nhật đáng yêu bé Khánh Vân Sinh nhật sang trọng Bích Ngân Tiệc sinh nhật bé Thanh Trang Dịch vụ ông già Noel Xiếc thú vui nhộn Biểu diễn xiếc quay đĩa Dịch vụ tổ chức tiệc uy tín Khám phá dịch vụ của chúng tôi Tiệc sinh nhật cho bé trai Trang trí tiệc cho bé gái Gói sự kiện chuyên nghiệp Chương trình giải trí hấp dẫn Dịch vụ hỗ trợ sự kiện Trang trí tiệc cưới đẹp Khởi đầu thành công với khai trương Chuyên gia tư vấn sự kiện Xem ảnh các sự kiện đẹp Tin mới về sự kiện Kết nối với đội ngũ chuyên gia Chú hề vui nhộn cho tiệc sinh nhật Ý tưởng tiệc cuối năm Tất niên độc đáo Trang trí tiệc hiện đại Tổ chức sinh nhật cho Hải Đăng Sinh nhật độc quyền Khánh Vân Phong cách tiệc Bích Ngân Trang trí tiệc bé Thanh Trang Thuê dịch vụ ông già Noel chuyên nghiệp Xem xiếc khỉ đặc sắc Xiếc quay đĩa thú vị
Trang chủ Giới thiệu Sinh nhật bé trai Sinh nhật bé gái Tổ chức sự kiện Biểu diễn giải trí Dịch vụ khác Trang trí tiệc cưới Tổ chức khai trương Tư vấn dịch vụ Thư viện ảnh Tin tức - sự kiện Liên hệ Chú hề sinh nhật Trang trí YEAR END PARTY công ty Trang trí tất niên cuối năm Trang trí tất niên xu hướng mới nhất Trang trí sinh nhật bé trai Hải Đăng Trang trí sinh nhật bé Khánh Vân Trang trí sinh nhật Bích Ngân Trang trí sinh nhật bé Thanh Trang Thuê ông già Noel phát quà Biểu diễn xiếc khỉ Xiếc quay đĩa
Thiết kế website Thiết kế website Thiết kế website Cách kháng tài khoản quảng cáo Mua bán Fanpage Facebook Dịch vụ SEO Tổ chức sinh nhật