score:0
the easiest way is to just save the generated color to a variable you can reference for each object (for eample when you map over it).
but if for some reason you don't want to do that then you could create an object factory function:
const buildobj = obj => {
const color = generatecolor();
const o = { ...obj, backgroundcolor: color, bordercolor: color };
return o;
}
and then call it to generate your new objects:
const mappeddata = data.map(o => buildobj(o))
now every object will have a unique color, but the backgroundcolor
and bordercolor
of each object will be the same.
score:0
you just have to declare a global variable and use it multiple of times.
const globalcolor = this.generatecolor();
var data = [{
label: "records",
data: [2, 4 ,20,10],
fill: false,
backgroundcolor: globalcolor ,
bordercolor: globalcolor ,
borderwidth: 1
},{
label: "amount",
data: [100, 200, 500,50],
fill: false,
backgroundcolor: globalcolor ,
bordercolor: globalcolor ,
borderwidth: 1
}
}]
generatecolor = () => {
var letters = '0123456789abcdef';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[math.floor(math.random() * 16)];
}
return color;
}
hope it helps
score:0
so the problem is that you're getting a random color each time you're calling the function. try generating a color once per element in your array. a simple idea is:
generatecolor = () => {
var letters = '0123456789abcdef';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[math.floor(math.random() * 16)];
}
return color;
}
var data = [{
label: "records",
data: [2, 4 ,20,10],
fill: false,
borderwidth: 1
},{
label: "amount",
data: [100, 200, 500,50],
fill: false,
borderwidth: 1
}].map(v => {
var color = generatecolor();
return {...v, backgroundcolor: color, bordercolor: color}
})
score:0
so the reason the border color and the background color are not matching up is because you are calling the function for each property where you need a color. functions alone do not have any kind of state, so there is no way for a function itself to remember what the function returned previously.
the best way i could think of doing this, that also retains the nice declarative way you layed-out your data was by the use of a class.
class generatecolorpairs {
constructor(numofcolorpairs) {
this.tickcycle = 2
this.currenttick = 0
this.colorsetindex = 0
this.colorset = []
const letters = '0123456789abcdef';
for (let i = 0; i < numofcolorpairs; i++) {
let color = '#';
for (let j = 0; j < 6; j++) {
color += letters[math.floor(math.random() * 16)];
}
debugger;
this.colorset.push(color)
}
}
tick() {
if (this.currenttick < this.tickcycle) {
this.currenttick += 1
} else if (this.currenttick === this.tickcycle) {
if (this.colorsetindex === this.numofcolorpairs) {
throw new error(`
function has been called more times than
the 'numofcolorpairs' x2\n to be able to use this
function more than ${this.numofcolorpairs} times,
pass a higher value when instanciating to the class
constructor
`)
}
this.colorsetindex += 1
this.currenttick = 0
}
}
generatecolor() {
this.tick()
return this.colorset[this.colorsetindex];
}
}
var colors = new generatecolorpairs(2)
var data = [{
label: "records",
data: [2, 4, 20, 10],
fill: false,
backgroundcolor: colors.generatecolor(),
bordercolor: colors.generatecolor(),
borderwidth: 1
}, {
label: "amount",
data: [100, 200, 500, 50],
fill: false,
backgroundcolor: colors.generatecolor(),
bordercolor: colors.generatecolor(),
borderwidth: 1
}];
console.log(data)
its a lot verbose than the other options mentioned here, but allows you to declare all your data in one statement and not have to pass it through a factory.
Source: stackoverflow.com
Related Query
- How to set same borderColor and backgroundColor in chartjs javascript
- How to dynamically set backgroundColor and borderColor barchart unsing Chart.js
- Why is borderColor function in chartjs running multiple times, and how to reduce it?
- How to take a set of Date objects and display the frequency based on time of day using ChartJS
- How to set min max for x axis depend on data with Chartjs and Spring Boot?
- How to sum the array value in javascript like chartjs data array and input value sum
- How to call a typescript arrow function and a javascript function in the same event
- How to execute a JavaScript function with ChartJS and FreeMarker?
- How can I set 3 color to the same chartjs bar?
- How do I make many ChartJS charts on the same page to have the same height and also even column width?
- How to set max and min value for Y axis
- How to set ChartJS Y axis title?
- ChartJS: How to set fixed Y axis max and min
- chartjs : how to set custom scale in bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- how to change background in chartjs and remove background lines?
- How to change the color of legend in chartjs and be able to add one more legend?
- How to remove gridlines and grid labels in Chartjs Radar?
- How to feed hour and minute data into chartJS
- How to set a full length background color for each bar in chartjs bar
- How to get onClick Event for a Label in ChartJS and React?
- How to dynamically set ChartJs line chart width based on dataset size?
- How to add ChartJS code in Html2Pdf to view image
- How can I datalabels and Sum display in the same time on a stacked bar
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- ChartJS How to set max labels for X axis?
- How to set ChartJS x-axis title
- how to set color for each item in tooltip with ChartJS
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- chartjs - how to set the order in which the different charts are displayed
More Query from same tag
- Chart.js updating-animations of radar-charts
- Chart JS flicker when new data is added to chart (Vue)
- Make Chart.js canvas responsive inside the resizeable div
- how to dynamicly change the json data in chartjs
- Chart.js How to align two X-axis in bar chart?
- ChartJS re-rendering bug
- Chart.js (Customising tool tips of a stacked bar to represent each stacked data)
- Ajax automatically placing double quotes around variable data returned in success call
- Bootstrap modal not working with chartjs line graph
- Chart.js bubble chart changing dataset labels
- angular-charts.js doesnt work with ionic
- Chart JS: Always show tooltips in a multi dataset line chart
- Chart Js , loading data on selection but bar graph displaying old values as well on hovering
- How to use below syntax in chart.js 3.x?
- Unable to display HH:mm:ss data in Chart.js
- How can i refere to an object variable dynamically?
- Trying to set scale ticks beginAtZero using Chart.js is unsuccessful, why?
- Chart.js Radar chart legend label font size doesn't work
- Multiple bubble chart datasets for chartjs
- chart.js with null data point in dataset
- to increase space between x axis and first horizontal bar in chart js
- chartjs - no smooth rendering on time series plot
- Unable to Construct Stacked Vue-ChartJS Line Plot
- Why doesn't parsing option work in chartjs?
- Chart.js not working after Django deployment on Heroku
- Chart.js multiTooltip Labels in Pie
- Chartjs Datasets overlapping and z-index
- Chart.js Scaling issue when initially loading the page
- refresh chart data every second javascript
- Chart.js not show in my function (function used in ajax) jquery