Who are using klinecharts? #280
Comments
|
I am using it for my private project. |
|
Got excited today after coming across this, after having the most infuriating experience with a different react charting library that is no longer maintained and is poorly documented. Currently in the process of testing it out to see if meets the needs of my project. Should it meet those needs, I'll definitely be switching over to this. So far it seems like it's much easier to maintain and requires little to no rewriting of basic features due to issues such as a glitched out date/x-axis and anti-aliasing. Regardless of final decision, thank you so much for creating this library. It's only been a couple hours and it's been a pleasant experience. Feels like it's gonna save time and let me get back to coding my actual project rather than the library itself. |
|
Been playing with this library in a hobby project, love the look, and it has been by far the easiest charting library to get up and running with minimal headaches. Here's a preview of what I'm using it for:
Trying to make something like ThinkOrSwim but for multiple brokers, both stock and crypto. Fully intend to keep the project open source and have plans for custom scripting (algo trading), company fundamentals lookup, social media sentiment analysis etc. Still working through the prototyping phase, but all in all this library is AWESOME!!! Shameless plug here but if anyone wants to help out I most definitely could use the help: https://github.com/QuantStop/QuantStopTerminal |
|
Bybit exchange uses KlineChart without changing the font style.
|
Hello,I am interested in your vue website,Could you share this picture page,please ~ |
@likeyou600 I recently have been playing with github actions and refactoring the whole project, as such I removed a lot and basically started over again. I will get this all back soon hopefully but to answer your question those are just buttons that trigger the function call for the chart to draw a shape like so: and the function to call the chart api: |
@sudoshu You did me a great favor!!! Thank you! |
hi guys,Could you please share with me your technical index algorithm, cvd, delta and fixed range volume? Thank you |
|
Indicator properties parameters should be more customizable. |
|
Our project switched from old tvjs chart to KlineCharts after quite a bit of work to fix blur issue and other small issues it looks quite nice and perform well. 
|
Could you share the codes of the RR system? And tooltipicon edit, remove functions? |
|
@xtrmus tooltip built in klinechart-pro. RR overlayimport { OverlayTemplate, OverlayFigure, LineType } from 'klinecharts';
const LongPosition: OverlayTemplate = {
name: 'longPosition',
totalStep: 4,
needDefaultPointFigure: true,
needDefaultXAxisFigure: false,
needDefaultYAxisFigure: false,
performEventPressedMove: ({ points, performPointIndex }) => {
console.log('performEventPressedMove', points);
if (points.length < 3) return;
if (performPointIndex === 0) {
if (points[0].value > points[1].value) {
points[0].value = points[1].value - points[1].value * 0.01;
}
if (points[0].value < points[2].value) {
points[0].value = points[2].value + points[2].value * 0.01;
}
}
if (performPointIndex === 1) {
if (points[1].value < points[0].value) {
points[1].value = points[0].value + points[0].value * 0.01;
}
points[2].timestamp = points[1].timestamp;
points[2].dataIndex = points[1].dataIndex;
}
if (performPointIndex === 2) {
if (points[2].value > points[0].value) {
points[2].value = points[0].value - points[0].value * 0.01;
}
points[1].timestamp = points[2].timestamp;
points[1].dataIndex = points[2].dataIndex;
}
},
performEventMoveForDrawing: ({
currentStep,
points,
performPoint,
performPointIndex,
}) => {
if (points.length < 2) return;
if (performPointIndex === 1) {
if (points[1].value < points[0].value) {
points[1].value = points[0].value + points[0].value * 0.01;
}
}
if (performPointIndex === 2) {
if (points[2].value > points[0].value) {
points[2].value = points[0].value - points[0].value * 0.01;
}
points[1].timestamp = points[2].timestamp;
points[1].dataIndex = points[2].dataIndex;
}
},
createPointFigures: ({
coordinates,
bounding,
overlay,
defaultStyles,
precision,
thousandsSeparator,
barSpace,
yAxis,
xAxis,
}) => {
if (coordinates.length < 2) return [];
const figures: OverlayFigure[] = [];
const { arrowLineColor, fillColor, rectColor, rectTextColor } =
defaultStyles['ruler'];
const x = coordinates[0].x;
const y = coordinates[0].y;
const width = coordinates[1].x - coordinates[0].x;
const height = coordinates[1].y - coordinates[0].y;
const price1 = yAxis?.convertFromPixel(y);
const price2 = yAxis?.convertFromPixel(coordinates[1].y);
const diff = price2 - price1;
const diffPercent = diff / (price1 / 100);
let diffPercent2 = 0;
let riskRewardRatio = '';
if (coordinates.length > 2) {
const price3 = yAxis?.convertFromPixel(coordinates[2].y);
const diff2 = price3 - price1;
diffPercent2 = diff2 / (price1 / 100);
riskRewardRatio = `R/R: ${(diffPercent / diffPercent2 * -1).toFixed(2)}:1`;
}
figures.push({
key: 'green-bg',
type: 'rect',
styles: {
color: 'rgba(0,255,0,0.1)',
},
attrs: {
x,
y,
width,
height,
},
});
figures.push({
key: 'position',
type: 'text',
ignoreEvent: true,
attrs: {
x: x + width / 2,
y: coordinates[1].y - 12,
text: `${diffPercent.toFixed(2)}% ${riskRewardRatio}`,
align: 'center',
},
styles: {
size: 12,
font: 'Roboto',
color: defaultStyles['position'].color,
},
});
figures.push({
key: 'line',
type: 'line',
styles: {
color: 'rgba(0,0,0,0.1)',
},
attrs: {
coordinates: [
{ x, y },
{ x: coordinates[1].x, y },
],
},
});
if (coordinates.length > 2) {
figures.push({
key: 'red-bg',
type: 'rect',
styles: {
color: 'rgba(255,0,0,0.1)',
},
attrs: {
x: coordinates[0].x,
y: coordinates[0].y,
width: coordinates[2].x - coordinates[0].x,
height: coordinates[2].y - coordinates[0].y,
},
});
figures.push({
key: 'position',
type: 'text',
ignoreEvent: true,
attrs: {
x: x + width / 2,
y: coordinates[2].y + 5,
text: `${diffPercent2.toFixed(2)}%`,
align: 'center',
},
styles: {
size: 12,
font: 'Roboto',
color: defaultStyles['position'].color,
},
});
}
return figures;
},
};
export default LongPosition; |
I know I'm asking for too much. Please don't mind me. |
can you share some code or ideas on volume profile? @olablt |
@xtrmus Did this screenshot use the klinechart library, please? If it did, can you tell me how you implemented the Profit/Loss Indicator (R:R) or give me some pointers? I have looked at the documentation and couldn't get it to work. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
欢迎使用了klinecharts的朋友们留言。
The text was updated successfully, but these errors were encountered: