kaktana / kaktana-react-lightweight-charts Goto Github PK
View Code? Open in Web Editor NEWA simple react wrapper for the tradingview lightweight charts module
License: MIT License
A simple react wrapper for the tradingview lightweight charts module
License: MIT License
On line 15 and 16 I added title and color but can't get it to appear.
https://github.com/HTTP-Warriors/Stock-Byte-App/blob/master/app/javascript/components/Pages/chart.js
import React from "react"
import KaktanaChart from 'kaktana-react-lightweight-charts'
class Chart extends React.Component {
render () {
const { chartData } = this.props
let lightChartData = chartData.map((element)=>{
return ({ time: element.date, value: element.close })
})
return (
<>
<KaktanaChart
options = {{
lineStyle: 1,
lineWidth: 1,
crosshairMarkerVisible: true,
crosshairMarkerRadius: 6,
lineType: 1,
alignLabels: true,
localization: {
dateFormat: "yyyy/MMMM/dd",
priceFormatter: function(price) {
// add $ sign before price
return '$' + price;
},
},
grid: {
vertLines: {
color: "#E0B64A",
style: 1,
visible: true,
},
horzLines: {
color: "#E0B64A",
style: 1,
visible: true,
},
},
priceScale: {
position: 'right',
mode: 1,
autoScale: true,
invertScale: false,
alignLabels: true,
borderVisible: true,
borderColor: "#E0B64A",
scaleMargins: {
top: 0.30,
bottom: 0.25,
},
},
crosshair: {
vertLine: {
color: "#E0B64A",
width: 1,
style: 0,
visible: true,
labelVisible: false,
},
horzLine: {
color: "#E0B64A",
width: 1,
style: 0,
visible: true,
labelVisible: true,
},
mode: 1,
},
timeScale: {
rightOffset: 0,
barSpacing: 30,
fixLeftEdge: true,
lockVisibleTimeRangeOnResize: true,
rightBarStaysOnScroll: true,
borderVisible: true,
borderColor: "#E0B64A",
visible: true,
timeVisible: true,
secondsVisible: false
}
}}
lineSeries =
{[{
data: lightChartData
}]}
height = {320}
width = {640}
/>
</>
);
}
}
export default Chart
import React from 'react';
import Chart from 'kaktana-react-lightweight-charts';
type LWChartsProps = {
}
const LWCharts: React.FC<LWChartsProps> = () => {
const options = {
color: '#f48fb1',
lineStyle: 0,
lineWidth: 1,
crosshairMarkerVisible: true,
crosshairMarkerRadius: 6,
crosshairMarkerBorderColor: '#ffffff',
crosshairMarkerBackgroundColor: '#2296f3',
lineType: 1,
}
const lineSeries = [{
data: [
{ x: 0, y: 8 },
{ x: 1, y: 5 },
{ x: 2, y: 4 },
{ x: 3, y: 9 },
{ x: 4, y: 1 },
{ x: 5, y: 7 },
{ x: 6, y: 6 },
{ x: 7, y: 3 },
{ x: 8, y: 2 },
{ x: 9, y: 0 }
]
}]
return (
<div>
<Chart options={options} lineSeries={lineSeries} autoWidth height={320} />
</div>
);
};
export default LWCharts;
As seen from this example lightweight-charts
supports custom themes, at the moment the react component doesn't support it.
Add support for optional prop options.lightTheme
& options.darkTheme
accordingly.
If welcomed & can create a PR for this :)
Code
import Chart from 'kaktana-react-lightweight-charts';
const stockChart = () => {
return (
<Chart options={{
timeScale: {
borderColor: '#fff',
tickMarkFormatter: time => 'TEST'
}
}} />
)
};
export default stockChart;
Expected Result
Each tick mark on the time scale should say 'TEST'. Border color should be white.
Actual Result
No change in what each tick mark displays. Border color does change to white.
thanks for the wrapper! How can we call the functions that come with a chart?
For example, if I wanted to reset the chart time axis, I would call:
chart.timeScale().resetTimeScale();
These docs show the functions: https://github.com/tradingview/lightweight-charts/blob/v3.3.0/docs/time-scale.md
but since kaktana is in the react wrapper, I am not sure how to access this function within the chart. Thanks!
HI, I am getting e.timeScale(...).unsubscribeVisibleTimeRangeChange is not a function error, as I did not implement it in my code. I do not know why I need this?.. The scenario was, At first my chart will displayed nicely as I wanted, then when I click at other data, it should display new chart but instead I get this error. So I think I will implement unsubscribeVisibleTimeRangeChange function but dont know how..
This is how the code look like
` <Chart
lineSeries={this.getChartData1("line", mainData)}
options={optionMaster}
autoWidth
height={indexMode ? 320 : 240}
onCrosshairMove={(e) => this.createLineChart(e, mainData)}
onClick={(e) => this.openWindow(e, mainData)}
( ....unsubscriberVisibleTimeRangeChange..how to call from here?...)
/>`
This is my options
optionMaster: { alignLabels: true, localization: { dateFormat: "dd MMM 'yy", }, handleScroll: { mouseWheel: false, pressedMouseMove: false, horzTouchDrag: false, vertTouchDrag: false, }, handleScale: { axisPressedMouseMove: false, mouseWheel: false, pinch: false, }, priceScale: { position: "left", autoScale: true, invertScale: true, alignLabels: false, borderVisible: false, borderColor: "#555ffd", scaleMargins: { top: 0.3, bottom: 0.25, }, }, timeScale: { fixLeftEdge: true, lockVisibleTimeRangeOnResize: true, }, },
Thank you so much for your work hard sir.
I'm currently using your lib to create my product.
But i cannot found any function like series.update() to update realtime series data.
So could you please help me to do this and update your repo
Works
{ time: '2018-10-25', open: 177.52, high: 180.50, low: 176.83, close: 179.07 },
Does not work,
{ time: '2018-10-21T19:20', open: 180.34, high: 180.99, low: 178.57, close: 179.85 },
Also does not work,
{ time: '1612729136', open: 180.34, high: 180.99, low: 178.57, close: 179.85 }
Thanks.
let options={
topColor:'#4682b4',
bottomColor: '#4682b4',
lineColor: 'rgba(21, 146, 230, 1)',
lineStyle: 0,
lineWidth: 3,
crosshairMarkerVisible: false,
crosshairMarkerRadius: 3,
layout: {
backgroundColor: "#FFF",
},
grid: {
vertLines: {
visible: false,
},
horzLines: {
visible: false,
}
},
priceScale: {
borderVisible: false,
position: 'left',
color:'red',
},
timeScale: {
borderVisible: false,
borderColor: "red",
},
crosshair: {
mode: CrosshairMode.Normal
},
}
return(
)
Hi,
Can you please explain, that how can we use dynamic time intervals for charts [1 month, 1 year, 5 years], etc?
Thank you.
Here is the context I am using it
const options = {
layout: {
backgroundColor: '#fff',
textColor: 'rgba(145, 150, 179, 1)',
fontSize: 12,
},
grid: {
vertLines: {
color: 'rgba(223, 225, 233, 1)',
style: 2,
visible: true,
},
horzLines: {
color: 'rgba(223, 225, 233, 1)',
style: 2,
visible: true,
},
},
crosshair: {
vertLine: {
color: 'rgba(78, 84, 113, 1)',
width: 0.5,
style: 2,
visible: true,
labelVisible: false,
},
horzLine: {
color: 'rgba(78, 84, 113, 1)',
width: 0.5,
style: 2,
visible: true,
labelVisible: true,
},
mode: 1,
},
handleScroll: false,
handleScale: false,
axisPressedMouseMove: false,
priceScale: {
borderVisible: false,
},
timeScale: {
rightOffset: 0,
fixLeftEdge: true,
lockVisibleTimeRangeOnResize: true,
shiftVisibleRangeOnNewBar: false,
timeVisible: true,
secondsVisible: true,
borderVisible: false,
},
};
const lineSeries = [
{
options: {
color: 'rgba(76, 194, 194, 1)',
lineWidth: 3,
crosshairMarkerVisible: true,
crosshairMarkerRadius: 8,
autoscaleInfoProvider: () => ({
priceRange: {
minValue: 0,
maxValue: 500,
},
}),
},
data: chart ? chart.map((el) => {
return { time: el.time, value: el.price };
}) : [],
},
];
return (
<Chart
options={options}
lineSeries={lineSeries}
autoWidth
height={190}
/>
);
I am trying to add this lib into react native . But not able to integrate it. Can you please help me out
Thank you so much for offering this amazing library!
I was very excited to try the TradingView library and was surprised that it wasn't built in React, so I was relieved to see that you created this React wrapper. :-)
Describe the bug
options
object that will be used here:
.priceScaleId: "left"
is not working.const lineSeries = [
{
data: mainSeriesData,
options: {
priceScaleId: "left",
title: "Portfolio Value"
}
},
{
data: percentSeriesData,
options: {
priceScaleId: "right",
title: "Profit/loss %"
}
}
];
To Reproduce
See https://codesandbox.io/s/stoic-northcutt-j9ti9?file=/src/App.tsx
Does kaktana-react-lightweight-charts wrapper not honor left vertical axis? Or am I doing something wrong?
(https://jsfiddle.net/3yeszpt5/ works without the wrapper.)
Expected behavior
I should see 2 vertical axes, like at https://jsfiddle.net/3yeszpt5/.
Thank you so much for your help!
Add possibility to use another version of lightweight-charts without fork
closes #19
Describe the bug
Unable to install the package with react 17.0.2
To Reproduce
Please add a Codesandbox link reproducing your issue
npm create-react-app someapp
code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/kaktana-react-lightweight-charts
npm ERR! kaktana-react-lightweight-charts@"2.0.0" from the root project
It seems Kaktana-react-lightweight-charts depends on react version 16.13.1 based on its dependency
Expected behavior
Should be able to install and use the react library
Hi, as the title says, the Chart does not resize correctly when enabling the autoWidth property.
My chart is in a flex container with the flex-grow = 1 enabled.
I have tried to fix it by using hooks and feeding custom width and height values, with no luck.
Make the page width bigger, then try to make it smaller. You will see that you can scroll horizontally because the Chart component is not correctly sized.
https://codesandbox.io/s/width-resize-dhz1c
Any ideas?
Thanks in advance.
npm install --save kaktana-react-lightweight-charts
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/kaktana-react-lightweight-charts
npm ERR! kaktana-react-lightweight-charts@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! A complete log of this run can be found in:
npm ERR! dir: 2022-07-18T16_06_40_243Z-debug.log
I can't seem to get the priceScale of a combined histogramSeries and candlestickSeries to decouple.
chart options:
const tvPriceOptions = {
alignLabels: true,
timeScale: {
rightOffset: 0,
barSpacing: 15,
fixLeftEdge: false,
lockVisibleTimeRangeOnResize: true,
rightBarStaysOnScroll: true,
borderVisible: false,
borderColor: '#fff000',
visible: true,
timeVisible: true,
secondsVisible: false
},
rightPriceScale: {
scaleMargins: {
top: 0.3,
bottom: 0.25,
},
borderVisible: false,
},
priceScale: {
autoScale: true,
},
watermark: {
color: 'rgba(0, 0, 0, 0.4)',
visible: true,
text: 'TxQuick: ' + pair + ': ' + candlestickInterval,
fontSize: 18,
horzAlign: 'left',
vertAlign: 'bottom',
},
};
const seriesCandleTv = [{
options: {
priceScaleId: 'right',
upColor: '#00AA00',
downColor: '#AA0000',
borderVisible: false,
wickVisible: true,
borderColor: '#000000',
wickColor: '#000000',
borderUpColor: '#00AA00',
borderDownColor: '#AA0000',
wickUpColor: '#00AA00',
wickDownColor: '#AA0000',
priceFormat: {
type: 'custom',
minMove: '0.00000001',
formatter: (price) => {
return parseFloat(price).toFixed(decimals);
}
},
},
data: candlesticksTv,
}];
//TODO figure out priceScaleId so both charts can be combined...
const seriesVolumeTv = [{
options: {
color: '#269ffb',
priceScaleId: '',
scaleMargins: {
top: 0.8,
bottom: 0,
},
priceFormat: {
type: 'custom',
minMove: '0.00000001',
formatter: (value) => {
return parseFloat(value).toFixed(6);
}
},
},
data: volumeBarsTv,
}];
chart tag:
<ChartTwo options={tvPriceOptions} histogramSeries={seriesVolumeTv} candlestickSeries={seriesCandleTv} autoWidth height={350} />
when it renders the volume bars and candlesticks share the same right hand scale and the volume bars completely overlap the candlesticks.
until I can figure this out I am just stacking two separate charts, but you can imagine how for many reasons this is less than ideal.
any thoughts are appreciated, thanks!
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Please add a Codesandbox link reproducing your issue
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.
Thank you so much for offering this amazing library!
I was very excited to try the TradingView library and was surprised that it wasn't built in React, so I was relieved to see that you created this React wrapper. :-)
Describe the bug
The "Tick marks formatter" example at https://www.tradingview.com/lightweight-charts/ points to https://jsfiddle.net/TradingView/350xh1zu/. If I copy tickMarkFormatter
from there into a project that uses kaktana-react-lightweight-charts, it doesn't work.
To Reproduce
See https://codesandbox.io/s/morning-tree-bevqr?file=/src/App.tsx:195-277
Expected behavior
A clear and concise description of what you expected to happen.
Additional context
#8 is a related issue.
Thanks!
I am new to coding...
is it possible to show open high low close labels in chart with respect to crosshair ?
I want to use the normal mode of crosshair instead of the default magnet mode.
This feature: https://github.com/tradingview/lightweight-charts/blob/master/docs/constants.md#crosshairmode
So far I have tried these, but none worked:
crosshair: { mode: "normal" },
crosshair: { mode: CrosshairMode.Normal },
crosshair: { mode: 1 },
crosshair: { mode: 2 },
Thanks!
The version used in this repo (2.0.0) is pretty old.
Are there any plans to update to the latest version (3.1.5) ?
Thanks for this project, helped a lot ! ๐
Your wrapper is amazing, however, trying to specify chart colors doesn't seem to apply:
Here is sample code, that doesn't work properly
const lineSeries = [{ color: props.color, borderColor: props.color, data: props.data }]
....
<Chart options={options} lineSeries={lineSeries} />
Chart is displayed, yet coloring doesn't seem to apply :(
Weirder still, adding empty candlestick
const candlestickSeries = [{ data: [ ] }] <Chart candlestickSeries={candlestickSeries} options={options} lineSeries={lineSeries} />
will change series color (prob to another default color).
What is the way to add colors support to the library? Thx
Hi, how do you create multiple line chart and declaring specific color on each of its line
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.