Comments (3)
You can already do something like that 😅
var defaultOpts = Chart.defaults.elements["candlestick"];
var chart = new Chart(ctx, {
type: 'candlestick',
data: {
datasets: [{
label: 'CHRT - Chart.js Corporation',
data: barData,
borderColor :{
up: defaultOpts.color.up,
down: defaultOpts.color.down,
unchanged: defaultOpts.color.up
}
}]
}})
from chartjs-chart-financial.
This probably works fine in straight JavaScript, but it's choking on the custom candlestick dataset type in Angular/Typescript.
var defaultOpts = Chart.defaults.elements["candlestick"];
myConfig.data = {
datasets: [
{
type: 'candlestick',
label: 'Price',
data: price,
borderColor: {
up: defaultOpts.color.up,
down: defaultOpts.color.down,
unchanged: defaultOpts.color.up
},
yAxisID: 'yAxis'
}
]
};
node_modules/chart.js/types/index.esm.d.ts:1653:3
1653 borderColor: Color;
~~~~~~~~~~~
The expected type comes from property 'borderColor' which is declared here on
type 'ChartDataset<keyof ChartTypeRegistry,
(number | ScatterDataPoint | BubbleDataPoint | FinancialDataPoint)[]>'
from chartjs-chart-financial.
WORKAROUND: for anyone using TypeScript, here's how I solved it:
// add new dataset options type for borderColor
type CandlestickDatasetOptions = BarControllerDatasetOptions & {
borderColor: {
up: string,
down: string,
unchanged: string
};
}
// custom border colors
const candleOptions = Chart.defaults.elements["candlestick"];
// sets body color defaults
candleOptions.color.up = 'darkGreen';
candleOptions.color.down = 'darkRed';
candleOptions.color.unchanged = '#555555';
// define border and wicks color
// this should set the default, but still have to reapply in dataset (below)
candleOptions.borderColor = {
up: candleOptions.color.up,
down: candleOptions.color.down,
unchanged: candleOptions.color.unchanged
};
// define base datasets
chartConfig.data = {
datasets: [
{
type: 'candlestick',
label: 'Price',
data: price,
yAxisID: 'yAxis',
borderColor: candleOptions.borderColor // sets border and wicks color
}
]
};
See PR (#115) for my suggestion on how to fix and use this in the main package.
from chartjs-chart-financial.
Related Issues (20)
- Chart.js 3 bugs HOT 1
- demo links in the readme seems to be broken HOT 4
- Inability to add a line chart to a candlestick chart HOT 3
- Running on NodeJS HOT 3
- Type '"metaExtensions"' cannot be used to index type 'ChartTypeRegistry[key]' HOT 1
- Problem with libary and nodejs, browserless usage HOT 4
- [Bug] Data does not get displayed properly after hiding it and showing it again. HOT 3
- Strip random data and replace with my own HOT 1
- Using this module with react ? HOT 2
- [Error] candlestick is not a registered controller chartjs. HOT 1
- Type Error from chart.js using candlestick charts HOT 10
- How to click to get data from candle stick
- Conflict with react^18 HOT 1
- BUG on calculating the min sample size
- X values and data is not displayed
- How to change candle stick color? HOT 3
- How to add some padding on the right hand size
- How can I center the chart?
- Error when upgrading from Chart.js 3.0 to 4.4 HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chartjs-chart-financial.