Home › Forums › StockChart Support › stockchart navigator and handles are not working › Reply To: stockchart navigator and handles are not working
import CanvasJSReact from “@canvasjs/react-stockcharts”; import { useEffect, useState } from “react”; import “./style.scss”;
const CanvasJSStockChart = CanvasJSReact.CanvasJSStockChart; const TotalMaterial = () => { const [dataPoints, setDataPoints] = useState([]); const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => { fetch(“https://canvasjs.com/data/gallery/react/btcusd2017-18.json”) .then((res) => res.json()) .then((data) => { const dps = data.map((item) => ({ x: new Date(item.date), y: Number(item.close), })); setDataPoints(dps); setIsLoaded(true); }); }, []);
const options = { height: 450, title: { text: “”, horizontalAlign: “left”, fontSize: 18, fontFamily: “Nunito”, fontWeight: “normal”, margin: 10, padding: 12, }, theme: “light2”, charts: [ { axisX: { crosshair: { enabled: true, snapToDataPoint: true, valueFormatString: “MM YYYY”, margin: 15, }, }, axisY: { title: “Material unites”, prefix: “”, crosshair: { enabled: true, snapToDataPoint: true, valueFormatString: “#,###.##”, margin: 15, }, }, toolTip: { shared: true, cornerRadius: 8, backgroundColor: “#BACDE8”, }, data: [ { name: “Amount”, type: “splineArea”, color: “#3576a8”, yValueFormatString: “#,###”, xValueFormatString: “MMM DD YYYY”, dataPoints: dataPoints, lineColor: “#2058A8”, fillOpacity: 0.4, }, ], }, ], navigator: { slider: { minimum: new Date(“2017-05-01”), maximum: new Date(“2018-05-01”), maskColor: “#a0beec”, }, }, rangeSelector: { inputFields: { enabled: false, }, buttons: [ { range: 1, rangeType: “month”, label: “1 Month”, }, { range: 3, rangeType: “month”, label: “3 Months”, }, { range: 6, rangeType: “month”, label: “6 Months”, }, { range: 12, rangeType: “month”, label: “1 Year”, }, ], }, };
const containerProps = { width: “100%”, margin: “auto”, };
return ( <div className=”chartContainer”> {isLoaded && ( <CanvasJSStockChart containerProps={containerProps} options={options} /> )} </div> ); };
export default TotalMaterial;