i’m working on a forex broker an trying to integrate custom indicator using highcharts library in NEXTJS 14 but unable to come across a documentation for such
i initially used trading view but seem like to integrate an indicator one will need to go for a paid package which is high so how can i handle same with highcharts if not what other library could i try out for like stock/forex market data
below is the code
import HighchartsReact from 'highcharts-react-official'
import Highcharts from "highcharts/highstock";
import HighchartsExporting from 'highcharts/modules/exporting'
import patternFill from "highcharts/modules/pattern-fill";
const fetchHighchartData = async () => {
setchartData({
data: [],
data_volume: [],
show_data: false
})
const data = await fetch(
'https://demo-live-data.highcharts.com/aapl-ohlcv.json'
).then(response => response.json());
// split the data set into ohlc and volume
const ohlc = [],
volume = [],
dataLength = data.length;
for (let i = 0; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
setchartData({
data: ohlc,
data_volume: volume,
show_data: true
})
console.log(this)
}
useLayoutEffect(() => {
fetchHighchartData()
}, [])
const options = {
chart:{
width:'1000',
height:'600'
},
title: {
text: 'My chart',
},
yAxis: [{
height: '75%',
width:'100%',
labels: {
align: 'right',
x: -3
},
title: {
text: 'AAPL'
}
}, {
top: '75%',
height: '25%',
labels: {
align: 'right',
x: -3
},
offset: 0,
title: {
text: 'MACD'
}
}],
series: [{
type:'candlestick',
id: 'aapl',
name: 'AAPL',
data: chartData.data,
},
{
type:'line',
id: 'volume',
name: 'Volume',
data: chartData.data_volume,
yAxis: 1
}
]
}
console.log(options)
return (
<>
{authData.logged_in ?
<Hero>
<main className={'bg-[#0B1215] lg:w-[100`enter code here`%] lg:h-[120vh] max-xl:h-[100vh] lg:overflow-x-hidden md:h-[150vh] md:w-[100%] max-md:h-[100vh] max-md:w-[100%] '}>
<div className={'flex lg:w-full lg:h-[100%] md:h-full lg:flex-row p-2'}>
<aside className={' lg:flex lg:w-[25%] lg:h-[full] md:h-full p-5 md:hidden sm:hidden max-sm:hidden'}>
<Rates handleGraphChange={handleGraphChange} />
</aside>
<div className={'flex lg:flex-row p-0 lg:w-[100%] lg:h-full md:w-[100%] md:h-[100%] sm:w-[100%] sm:h-[100%] max-sm:w-[100%] max-sm:h-[100%] border-white bg-[#101720] max-md:flex-col max-xl:flex-col md:flex-col'}>
<div className='flex flex-col w-[100%] h-[100%] p-2'>
<div className='p-0 m-0 w-[100%] lg:h-[10%] flex justify-center items-center'>
<FlipClockCountdown
// to={new Date(expiry).getTime() + 24 * 3600 * 1000 + 5000}
to={'2024-09-12'}
className='h-full' title='Count-Down'
labels={['DAYS', 'HOURS', 'MINUTES', 'SECONDS']}
digitBlockStyle={{ height: 45, width: 25, backgroundColor: 'white', color: 'bg-[#0B1215]' }}
// dividerStyle={{ color: 'white', height: 1 }}
// separatorStyle={{ color: 'red', size: '6px' }}
labelStyle={{ fontSize: 15, fontWeight: 500, textTransform: 'uppercase', color: 'white', marginTop: '10%' }}
/>;
</div>
{/*
<div className='w-[100%] lg:h-[20%] md:h-[40%] sm:h-[50%] max-sm:h-[70%] p-2 grid lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-2 max-sm:grid-cols-2 place-items-center' >
<Filter />
</div> */}
<div className='p-0 flex overflow-y-hidden justify-center items-center lg:w-[100%] lg:h-[90%] max-lg:w-[100%] max-lg:h-[70%] md:w-[100%] md:h-[70%] max-md:h-[100%] sm:w-[100%] sm:h-[100%] max-sm:w-[100%] max-sm:h-[100%] '>
{chartData.show_data ?
<HighchartsReact
highcharts={ Highcharts }
options={options}
constructorType={'stockChart'}
className="[w-100%] h-[100%]"
/>
:
<span className="loading loading-bars text-white loading-lg"></span>
}
</div>
</div>
</div>
</div>
</main>
</Hero>
:
router.push('/')
}
</>
)