ng2-charts & chart.js - Change background color
Im working with Angular 6, and trying to change the background color of my doughnut chart I just created with chart.js.
Ive been following the example done here: https://www.js-tutorials.com/angularjs-tutorial/angular-6-chart-tutorial-using-chart-js/
But, no matter how I attempt to change the background color, either the way shown in that example or otherwise, the colors are always the same default colors provided by the library.
Can anyone help show me a way to override this, please?
component.html:
<canvas baseChart
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
[options]="doughnutChartOptions"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
component.ts:
public doughnutChartLabels: string = ['Running', 'Paused', 'Stopped'];
public doughnutChartData: number = [this.activeProducers, this.pausedProducers, this.invalidProducers];
public doughnutChartType = 'doughnut';
public doughnutChartOptions: any = {
backgroundColor: [
'Red',
'Yellow',
'Blue',
],
responsive: false,
};
The colors I want are:
- Running: #ced
- Paused: #fda
- Stopped: #fdd
Created a stackblitz: https://stackblitz.com/edit/angular-ctydcu
angular twitter-bootstrap charts chart.js
asked Nov 11 at 20:57
Cody Pritchard
386
add a comment |
Im working with Angular 6, and trying to change the background color of my doughnut chart I just created with chart.js.
Ive been following the example done here: https://www.js-tutorials.com/angularjs-tutorial/angular-6-chart-tutorial-using-chart-js/
But, no matter how I attempt to change the background color, either the way shown in that example or otherwise, the colors are always the same default colors provided by the library.
Can anyone help show me a way to override this, please?
component.html:
<canvas baseChart
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
[options]="doughnutChartOptions"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
component.ts:
public doughnutChartLabels: string = ['Running', 'Paused', 'Stopped'];
public doughnutChartData: number = [this.activeProducers, this.pausedProducers, this.invalidProducers];
public doughnutChartType = 'doughnut';
public doughnutChartOptions: any = {
backgroundColor: [
'Red',
'Yellow',
'Blue',
],
responsive: false,
};
The colors I want are:
- Running: #ced
- Paused: #fda
- Stopped: #fdd
Created a stackblitz: https://stackblitz.com/edit/angular-ctydcu
angular twitter-bootstrap charts chart.js
asked Nov 11 at 20:57
Cody Pritchard
386
Can you use color code instead of color name ?
– Sunil Singh
Nov 11 at 21:01
@SunilSingh, See the bottom of my post. I have tried color code, and the literal string was just another test. Neither have worked at overriding the default colors shown in the picture
– Cody Pritchard
Nov 11 at 21:06
It would be easy to help you out if you can create stackblitz demo.
– Sunil Singh
Nov 11 at 21:09
add a comment |
Im working with Angular 6, and trying to change the background color of my doughnut chart I just created with chart.js.
Ive been following the example done here: https://www.js-tutorials.com/angularjs-tutorial/angular-6-chart-tutorial-using-chart-js/
But, no matter how I attempt to change the background color, either the way shown in that example or otherwise, the colors are always the same default colors provided by the library.
Can anyone help show me a way to override this, please?
component.html:
<canvas baseChart
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
[options]="doughnutChartOptions"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
component.ts:
public doughnutChartLabels: string = ['Running', 'Paused', 'Stopped'];
public doughnutChartData: number = [this.activeProducers, this.pausedProducers, this.invalidProducers];
public doughnutChartType = 'doughnut';
public doughnutChartOptions: any = {
backgroundColor: [
'Red',
'Yellow',
'Blue',
],
responsive: false,
};
The colors I want are:
- Running: #ced
- Paused: #fda
- Stopped: #fdd
Created a stackblitz: https://stackblitz.com/edit/angular-ctydcu
angular twitter-bootstrap charts chart.js
asked Nov 11 at 20:57
Cody Pritchard
386
Im working with Angular 6, and trying to change the background color of my doughnut chart I just created with chart.js.
Ive been following the example done here: https://www.js-tutorials.com/angularjs-tutorial/angular-6-chart-tutorial-using-chart-js/
But, no matter how I attempt to change the background color, either the way shown in that example or otherwise, the colors are always the same default colors provided by the library.
Can anyone help show me a way to override this, please?
component.html:
<canvas baseChart
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
[options]="doughnutChartOptions"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
component.ts:
public doughnutChartLabels: string = ['Running', 'Paused', 'Stopped'];
public doughnutChartData: number = [this.activeProducers, this.pausedProducers, this.invalidProducers];
public doughnutChartType = 'doughnut';
public doughnutChartOptions: any = {
backgroundColor: [
'Red',
'Yellow',
'Blue',
],
responsive: false,
};
The colors I want are:
- Running: #ced
- Paused: #fda
- Stopped: #fdd
Created a stackblitz: https://stackblitz.com/edit/angular-ctydcu
angular twitter-bootstrap charts chart.js
angular twitter-bootstrap charts chart.js
asked Nov 11 at 20:57
Cody Pritchard
386
asked Nov 11 at 20:57
Cody Pritchard
386
edited Nov 11 at 21:21
asked Nov 11 at 20:57
Cody Pritchard
386
asked Nov 11 at 20:57
Cody Pritchard
386
asked Nov 11 at 20:57
Cody Pritchard
386
386
Can you use color code instead of color name ?
– Sunil Singh
Nov 11 at 21:01
@SunilSingh, See the bottom of my post. I have tried color code, and the literal string was just another test. Neither have worked at overriding the default colors shown in the picture
– Cody Pritchard
Nov 11 at 21:06
It would be easy to help you out if you can create stackblitz demo.
– Sunil Singh
Nov 11 at 21:09
add a comment |
Can you use color code instead of color name ?
– Sunil Singh
Nov 11 at 21:01
@SunilSingh, See the bottom of my post. I have tried color code, and the literal string was just another test. Neither have worked at overriding the default colors shown in the picture
– Cody Pritchard
Nov 11 at 21:06
It would be easy to help you out if you can create stackblitz demo.
– Sunil Singh
Nov 11 at 21:09
Can you use color code instead of color name ?
– Sunil Singh
Nov 11 at 21:01
Can you use color code instead of color name ?
– Sunil Singh
Nov 11 at 21:01
@SunilSingh, See the bottom of my post. I have tried color code, and the literal string was just another test. Neither have worked at overriding the default colors shown in the picture
– Cody Pritchard
Nov 11 at 21:06
@SunilSingh, See the bottom of my post. I have tried color code, and the literal string was just another test. Neither have worked at overriding the default colors shown in the picture
– Cody Pritchard
Nov 11 at 21:06
It would be easy to help you out if you can create stackblitz demo.
– Sunil Singh
Nov 11 at 21:09
It would be easy to help you out if you can create stackblitz demo.
– Sunil Singh
Nov 11 at 21:09
add a comment |
1 Answer
1
active
oldest
votes
Add the following property:
private donutColors = [
{
backgroundColor: [
'#ced',
'#fda',
'#fdd',
]
}
];
Note that this is an array, not an object
Then, add the following property in the template
[colors]="donutColors"
Here is a Stackblitz demo
answered Nov 11 at 21:10
user184994
11k11828
Fantastic. Thank you very much.
– Cody Pritchard
Nov 11 at 21:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253167%2fng2-charts-chart-js-change-background-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Add the following property:
private donutColors = [
{
backgroundColor: [
'#ced',
'#fda',
'#fdd',
]
}
];
Note that this is an array, not an object
Then, add the following property in the template
[colors]="donutColors"
Here is a Stackblitz demo
answered Nov 11 at 21:10
user184994
11k11828
Fantastic. Thank you very much.
– Cody Pritchard
Nov 11 at 21:23
add a comment |
Add the following property:
private donutColors = [
{
backgroundColor: [
'#ced',
'#fda',
'#fdd',
]
}
];
Note that this is an array, not an object
Then, add the following property in the template
[colors]="donutColors"
Here is a Stackblitz demo
answered Nov 11 at 21:10
user184994
11k11828
Fantastic. Thank you very much.
– Cody Pritchard
Nov 11 at 21:23
add a comment |
Add the following property:
private donutColors = [
{
backgroundColor: [
'#ced',
'#fda',
'#fdd',
]
}
];
Note that this is an array, not an object
Then, add the following property in the template
[colors]="donutColors"
Here is a Stackblitz demo
answered Nov 11 at 21:10
user184994
11k11828
Add the following property:
private donutColors = [
{
backgroundColor: [
'#ced',
'#fda',
'#fdd',
]
}
];
Note that this is an array, not an object
Then, add the following property in the template
[colors]="donutColors"
Here is a Stackblitz demo
answered Nov 11 at 21:10
user184994
11k11828
answered Nov 11 at 21:10
user184994
11k11828
answered Nov 11 at 21:10
user184994
11k11828
answered Nov 11 at 21:10
user184994
11k11828
11k11828
Fantastic. Thank you very much.
– Cody Pritchard
Nov 11 at 21:23
add a comment |
Fantastic. Thank you very much.
– Cody Pritchard
Nov 11 at 21:23
Fantastic. Thank you very much.
– Cody Pritchard
Nov 11 at 21:23
Fantastic. Thank you very much.
– Cody Pritchard
Nov 11 at 21:23
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253167%2fng2-charts-chart-js-change-background-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you use color code instead of color name ?
– Sunil Singh
Nov 11 at 21:01
@SunilSingh, See the bottom of my post. I have tried color code, and the literal string was just another test. Neither have worked at overriding the default colors shown in the picture
– Cody Pritchard
Nov 11 at 21:06
It would be easy to help you out if you can create stackblitz demo.
– Sunil Singh
Nov 11 at 21:09