I'm using Chart.js, I multiple line-charts have same styling different data. So I want to make a source for the stylings called _props and include it in the charts
this._props = {
icons: ['chevron-bottom', 'chevron-top', 'chevron-top', 'chevron-top', 'chevron-bottom'],
borderColor: Globals.primary,
pointBackgroundColor: Globals.primary,
pointBorderColor: Globals.primary,
pointHoverBackgroundColor: Globals.foreground,
pointHoverBorderColor: Globals.primary,
borderWidth: 2,
pointRadius: 2,
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointHoverRadius: 5,
fill: false,
};
this._smallLineChart1 = ChartsExtend.SmallLineChart('lineChart1', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
datasets: [
{
label: 'BTC / USD',
data: [9415.1, 9430.3, 9436.8, 9471.5, 9467.2],
this._props, // the elements should be in here not inside another array or object.
},
],
});
I want it to be like this:
this._smallLineChart1 = ChartsExtend.SmallLineChart('lineChart1', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
datasets: [
{
label: 'BTC / USD',
data: [9415.1, 9430.3, 9436.8, 9471.5, 9467.2],
icons: ['chevron-bottom', 'chevron-top', 'chevron-top', 'chevron-top', 'chevron-bottom'],
borderColor: Globals.primary,
pointBackgroundColor: Globals.primary,
pointBorderColor: Globals.primary,
pointHoverBackgroundColor: Globals.foreground,
pointHoverBorderColor: Globals.primary,
borderWidth: 2,
pointRadius: 2,
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointHoverRadius: 5,
fill: false,
},
],
});
note: the functions are in a class
You could use the spread operator (...) to add your props inside the dataset. Then you can combine what you already have stored with the extra props.
this._smallLineChart1.datasets[0] = {...this._smallLineChart1.datasets[0],...this._props};
Here's an example using a Test class
class Test {
_props;
_smallLineChart1;
constructor(){
this._props = {
someProp:'',
borderWidth: 2,
pointRadius: 2,
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointHoverRadius: 5,
fill: false,
};
this._smallLineChart1 = {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
datasets: [
{
label: 'BTC / USD',
data: [9415.1, 9430.3, 9436.8, 9471.5, 9467.2],
},
],
};
this._smallLineChart1.datasets[0] = {...this._smallLineChart1.datasets[0],...this._props};
console.log(this)
}
}
new Test();