Capturing Drawing Values from Technical Analysis with Annotations Chart in React
dogankablan opened this issue · comments
Hi ,
I am using the Technical Analysis with Annotations chart in React.
I have created a demo where I can make drawings using drawing tools.
However, I want to transfer these drawing values into a state and use that data later.
How can I achieve this?
import React, { useMemo } from 'react';
import HighchartsReact from 'highcharts-react-official';
import 'highcharts/css/annotations/popup.css';
import 'highcharts/css/stocktools/gui.css';
import Highcharts from 'highcharts/highstock';
import HighchartsIndicatorsAll from 'highcharts/indicators/indicators-all';
import HighchartsAccessibility from 'highcharts/modules/accessibility';
import HighchartsAnnotations from 'highcharts/modules/annotations';
import HighchartsAnnotationsAdvanced from 'highcharts/modules/annotations-advanced';
import HighchartsDragPanes from 'highcharts/modules/drag-panes';
import HighchartsExportData from 'highcharts/modules/export-data';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsFullScreen from 'highcharts/modules/full-screen';
import HighchartsHeikinAshi from 'highcharts/modules/heikinashi';
import HighchartsHollowCandlestick from 'highcharts/modules/hollowcandlestick';
import HighchartsPriceIndicator from 'highcharts/modules/price-indicator';
import HighchartsStockTools from 'highcharts/modules/stock-tools';
import { webViewRender } from 'react-native-react-bridge/lib/web';
HighchartsAnnotations(Highcharts);
HighchartsIndicatorsAll(Highcharts);
HighchartsDragPanes(Highcharts);
HighchartsAnnotationsAdvanced(Highcharts);
HighchartsPriceIndicator(Highcharts);
HighchartsFullScreen(Highcharts);
HighchartsStockTools(Highcharts);
HighchartsHeikinAshi(Highcharts);
HighchartsHollowCandlestick(Highcharts);
HighchartsExporting(Highcharts);
HighchartsExportData(Highcharts);
HighchartsAccessibility(Highcharts);
HighchartsAnnotations(Highcharts);
const data = [
[1628515800000, 146.2, 146.7, 145.52, 146.09, 48908700],
[1628602200000, 146.44, 147.71, 145.3, 145.6, 69023100],
//Chart Data
];
const Root = () => {
const options = useMemo(() => {
return {
yAxis: {
plotBands: [
{
color: 'rgba(169, 255, 101, 0.4)',
from: 182.94,
to: 177.57,
zIndex: 3,
label: {
text: 'Resistance Zone',
},
},
],
},
annotations: [
{
type: 'fibonacci',
langKey: 'Fibonacci',
typeOptions: {
points: [
{
x: 1631021400000,
y: 157.26,
},
{
x: 1633354200000,
y: 157.26,
},
],
height: 138.27 - 157.26,
xAxis: 0,
yAxis: 0,
},
},
{
type: 'trendline',
langKey: 'Trendline',
typeOptions: {
points: [
{
x: 1636727400000,
y: 147.48,
},
{
x: 1642516200000,
y: 182.5,
},
],
xAxis: 0,
yAxis: 0,
},
shapeOptions: {
stroke: 'red',
strokeWidth: 2,
},
},
],
series: [
{
id: 'main',
type: 'candlestick',
color: '#FF6F6F',
upColor: '#6FB76F',
data: data,
dataGrouping: {
enabled: false,
},
},
],
navigation: {
bindings: {
trendline: {
className: 'highcharts-trendline',
init: function (chart) {
chart.addAnnotation({
langKey: 'Trendline',
type: 'trendline',
typeOptions: {
points: [],
xAxis: 0,
yAxis: 0,
},
shapeOptions: {
stroke: 'red',
strokeWidth: 2,
},
});
},
},
},
},
exporting: {
enabled: true,
},
credits: {
enabled: false,
},
};
}, []);
return (
<HighchartsReact
highcharts={Highcharts}
constructorType={'stockChart'}
options={options}
/>
);
};
export default webViewRender(<Root />);
Hi @dogankablan,
You can use similar logic as the built-in save chart button in stock tools: https://github.com/highcharts/highcharts/blob/40735d878113ee1cc3c070c4bbe27356cf7a9b80/ts/Stock/StockTools/StockToolsBindings.ts#L1950
const saveChartOptions = () => {
if (chartComponent) {
const chart = chartComponent.current.chart;
const annotations = [],
indicators = [],
flags = [],
yAxes = [];
chart.annotations.forEach(function (annotation, index) {
annotations[index] = annotation.userOptions;
});
chart.series.forEach(function (series) {
if (series.is("sma")) {
indicators.push(series.userOptions);
} else if (series.type === "flags") {
flags.push(series.userOptions);
}
});
chart.yAxis.forEach(function (yAxis) {
if (yAxis.userOptions.className !== "highcharts-navigator-yaxis") {
yAxes.push(yAxis.options);
}
});
setSavedChartOptions({
annotations,
indicators,
flags,
yAxes,
});
}
};
Live example: https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-rg43m7?file=%2Fdemo.jsx
Best regards!
Thank you for your response.
I want to perform the registration process by detecting user events instead of using a button and record the registration on the state.
Is it possible for me to do this?
@dogankablan, I am not quite sure what you want to achieve, so could you add more details to your question? What do you mean by user events?
@ppotaczek what I mean by user events is the drawings made by the user using drawing tools. For example, when the user adds a flag, I want to transfer the values of the drawings made on the chart into the state. This applies to all stock tools. Currently, I trigger this recording process with a button. However, I want to trigger it based on the drawing actions the user takes and transfer them into the state, rather than triggering it with a button.
You can use almost the same logic, but in some navigation events. Please check the example below.
Live example: https://codesandbox.io/p/sandbox/highcharts-react-demo-forked-3hv7q6
API Reference: https://api.highcharts.com/highstock/navigation
Thank you for your support.