How can i change the background color in angular2-highcharts?
i my component i have:
chart: any;
saveChart(chart) {
this.chart = chart;
}
constructor(
private eventManager: EventManager,
private locationService: LocationService,
private route: ActivatedRoute,
private alertService: AlertService
) {
this.options = {
title: { text: 'Senaste dygnet' },
xAxis: {
type: 'datetime',
title: {
text: 'Tid'
}
},
yAxis: {
title: {
text: 'Temperatur'
}
},
series: [{
name: 'Vattentemperatur',
data: []
}]
};
}
template:
<chart [options]="options" (load)="saveChart($event.context)"></chart>
when i do this.chart.backgroundColor= "#000000";
nothing happens.
I got some help from a co-worker and this works for me now.
saveChart(chart) {
this.chart = chart;
this.chart.chartBackground.css({
color: 'rgba(225, 225, 225, 0.7)',
fontSize: '16px'
});
}
chart: {
"events": {
"drilldown": drillDownCallBack
},
"plotBackgroundColor": "black",
"plotBorderWidth": null,
"plotShadow": false,
"type": "pie"
}
You can just pass "plotBackgroundColor": "black",for background color. Here is an example check this
Related
I created a chart with two y-axis and one x-axis and struggle to create tooltips with intersect = false, so it will start the tooltip when hovering over the line and not only the point of the chart
However, the whole settings for the tooltip, described on
https://www.chartjs.org/docs/latest/configuration/tooltip.html
Does not seem to have any effect for me. My code see below
I am using this code inside a NodeRed template node
\<canvas id="myChart" width=912 height =370\>\</canvas\>
\<script\>
var textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');
var gridcolor = '#E6E6E6';
var linecolors = \['#333F50','#B55A11', '#90C050'\]
var backgroundColor = \['#999FA7','#DAAC88', '#C7DFA7'\]
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: {{{payload.labels}}},
datasets: [
{
label: 'Folie Länge Ist',
backgroundColor: backgroundColor[0],
borderColor: linecolors[0],
data: {{{payload.eins}}},
yAxisID: 'left-y-axis',
},
{
label: 'Folie Länge Soll',
backgroundColor: backgroundColor[1],
borderColor: linecolors[1],
data: {{{payload.zwei}}},
yAxisID: 'left-y-axis',
},
{
label: 'Aufwickler Durchmesser',
backgroundColor: backgroundColor[2],
borderColor: linecolors[2],
data: {{{payload.drei}}},
yAxisID: 'right-y-axis',
}
]
},
// Configuration options
options: {
animation: false,
legend: {
display: true,
position: "top"
},
elements: {
point: {
pointStyle: 'circle',
radius: 0
},
line: {
tension: 0,
fill: false
}
},
plugins: {
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
yAxes: [
{
gridLines :{display:false},
id: 'left-y-axis',
type: 'linear',
position: 'left',
ticks: {
fontColor: linecolors[0],
callback: function(value, index, ticks) {
return new Intl.NumberFormat('de-DE').format(value);
}
}
},
{
gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:1},
id: 'right-y-axis',
type: 'linear',
position: 'right',
ticks: {
fontColor:linecolors[2],
callback: function(value, index, ticks) {
return new Intl.NumberFormat('de-DE').format(value);
}
}
}
],
xAxes: [
{
ticks: {
autoSkip: true,
autoSkipPadding: 10,
maxRotation: 0,
minRotation: 0
}
}
]
}
}
});
\</script\>
Tried setting intersect = false, also enable = false just to test if these settings have an effect
How do I need to modify this code below, in order to suffix a % symbol at the end of the tooltip value?
I've tried so many solutions from different posts, but they all seem to be v2.0 solutions. I am not sure what to write inside the callbacks line.
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [12, 19, 3, 5, 2],
backgroundColor: [
'#b59671',
'#c7ba53',
'#7da35a',
'#4c77ba',
'#000000'
],
borderColor: [
'#b59671',
'#c7ba53',
'#7da35a',
'#4c77ba',
'#000000'
],
borderWidth: 1,
}]
},
options: {
cutout: 300,
hoverOffset: 8,
plugins: {
tooltip: {
displayColors: false,
callbacks: {
}
}
}
}
});
Here's a working example:
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [0.12, 0.19, 0.3, 0.5, 0.2],
backgroundColor: [
'#b59671',
'#c7ba53',
'#7da35a',
'#4c77ba',
'#000000'
],
borderColor: [
'#b59671',
'#c7ba53',
'#7da35a',
'#4c77ba',
'#000000'
],
borderWidth: 1,
}]
},
options: {
cutout: 300,
hoverOffset: 8,
plugins: {
tooltip: {
displayColors: false,
callbacks: {
label: function(context) {
let label = new Intl.NumberFormat('en-US', {
style: 'percent',
minimumFractionDigits: 0,
maximumFractionDigits: 0
}).format(context.formattedValue);
return label;
},
title: function(context) {
let title = context[0].label;
return title;
}
},
}
}
}
});
A short solution would be just adding the % after the {data.formattedValue} bit:
plugins: {
tooltip: {
callbacks: {label: data => `${data.formattedValue}%` }}}
I try to build an input field for quantities with plus and minus buttons. More like to understand how composite controls are working. I found this documentation.
I thought I could use the new control like this:
new ex.perimental.Input({
width: "14em",
editable: true,
input: new sap.m.Input({
width: "8em",
value: {
path: "model>Quantity",
type: new sap.ui.model.type.Integer({}, {
minimum:0
})
},
description: "{model>Unit}"
}),
})
The control code looks like this:
sap.ui.define([
"sap/ui/core/Control",
"sap/m/Button",
"sap/m/Input"
], function(Control, Button, Input) {
"use strict";
return Control.extend("ex.perimental.Input", {
metadata: {
properties: {
width: {
type: "string",
defaultValue: "14em",
},
editable: {
type: "boolean",
defaultValue: false,
},
},
aggregations: {
_increaseButton: {
type: "sap.m.Button",
multiple: false,
visibility: "hidden",
},
_decreaseButton: {
type: "sap.m.Button",
multiple: false,
visibility: "hidden",
},
input: { type: "sap.m.Input", multiple: false },
_hBox: { type: "sap.m.HBox", multiple: false, visibility: "hidden" },
},
events: {
increase: {},
decrease: {},
},
},
_onDecrease: function(oEvent) {
var oResourceBundle = this.getModel("i18n").getResourceBundle();
var oldValue = this.getAggregation("input").getValue();
var newValue = 0;
if (!isNaN(Number(oldValue))) {
newValue = Number(oldValue) - 1;
}
oInput.setValue(newValue);
this.fireEvent("decrease", {
oldValue: oldValue,
newValue: newValue,
});
},
_onIncrease: function(oEvent) {
var oResourceBundle = this.getModel("i18n").getResourceBundle();
var oldValue = this.getAggregation("input").getValue();
var newValue = 0;
if (!isNaN(Number(oldValue))) {
newValue = Number(oldValue) + 1;
}
oInput.setValue(newValue);
this.fireEvent("increase", {
oldValue: oldValue,
newValue: newValue,
});
},
init: function() {
this.setAggregation(
"_decreaseButton",
new Button({
icon: "sap-icon://sys-minus",
press: this._onDecrease.bind(this),
})
);
this.setAggregation(
"_increaseButton",
new Button({
icon: "sap-icon://sys-add",
press: this._onIncrease.bind(this),
})
);
this.setAggregation(
"_hBox",
new sap.m.HBox({
items: [
this.getAggregation("_decreaseButton"),
this.getAggregation("_increaseButton"),
],
})
);
},
setEditable: function(sValue) {
debugger;
// aggregations will be null now
// I assume because they are reused in the HBox control
// this.getAggregation("_increaseButton").setEditable(sValue);
// this.getAggregation("_decreaseButton").setEditable(sValue);
// this.getAggregation("input").setEditable(sValue);
},
setWidth: function(sValue) {
this.getAggregation("_hBox").setWidth(sValue);
},
setInput: function(oInput) {
this.setAggregation("input", oInput);
var oHBox = this.getAggregation("_hBox");
oHBox.insertItem(oInput, 1);
},
renderer: function(oRenderManager, oControl) {
oRenderManager.write("<div");
oRenderManager.writeControlData(oControl);
oRenderManager.addClass("myStyle");
oRenderManager.writeClasses();
oRenderManager.write(">");
oRenderManager.renderControl(oControl.getAggregation("_hBox"));
oRenderManager.write("</div>");
}
});
});
It will be rendered but the setEditable is not working.
The buttons (used inside the HBox control again) are not reachable via getAggregation. Also the input field (set from outside) can't be accessed.
Not sure how to do it right. Anyone an idea?
Edit2
This is the latest version but still not working.
I am asking me how to put the externally defined input control into the right place inside the inner Hbox control and be able to access this control in methods like setEditable?
sap.ui.define([
"sap/ui/core/Control",
"sap/m/Button",
"sap/m/Input"
], function(Control, Button, Input) {
"use strict";
return Control.extend("ex.perimental.Input", {
metadata: {
properties: {
width: {
type: "string",
defaultValue: "14em",
},
editable: {
type: "boolean",
defaultValue: false,
},
},
aggregations: {
_hBox: { type: "sap.m.HBox", multiple: false, visibility: "hidden" },
},
associations: {
input: { type: "sap.m.Input", multiple: false, singularName: "input" },
},
events: {
increase: {},
decrease: {},
},
},
_onDecrease: function(oEvent) {
var oResourceBundle = this.getModel("i18n").getResourceBundle();
var oldValue = this._input.getValue();
var newValue = 0;
if (!isNaN(Number(oldValue))) {
newValue = Number(oldValue) - 1;
}
this._input.setValue(newValue);
this.fireEvent("decrease", {
oldValue: oldValue,
newValue: newValue,
});
},
_onIncrease: function(oEvent) {
var oResourceBundle = this.getModel("i18n").getResourceBundle();
var oldValue = this._input.getValue();
var newValue = 0;
if (!isNaN(Number(oldValue))) {
newValue = Number(oldValue) + 1;
}
this._input.setValue(newValue);
this.fireEvent("increase", {
oldValue: oldValue,
newValue: newValue,
});
},
init: function() {
this._decreaseButton = new Button({
icon: "sap-icon://sys-minus",
press: this._onDecrease.bind(this),
});
this._increaseButton = new Button({
icon: "sap-icon://sys-add",
press: this._onIncrease.bind(this),
});
this.setAggregation(
"_hBox",
new sap.m.HBox({
items: [
this._decreaseButton,
this.getAssociation("input"),
this._increaseButton,
],
})
);
},
setEditable: function(sValue) {
var bEditable = false;
if (sValue === true) {
bEditable = true;
}
this._decreaseButton.setEnabled(bEditable);
this._increaseButton.setEnabled(bEditable);
// seems not always working
this._input.setEditable(bEditable);
},
setWidth: function(sValue) {
this.getAggregation("_hBox").setWidth(sValue);
},
setInput: function(oInput) {
this.setAssociation("input", oInput);
this._input = oInput;
var oHBox = this.getAggregation("_hBox");
oHBox.insertItem(oInput, 1);
},
renderer: function(oRenderManager, oControl) {
oRenderManager.write("<div");
oRenderManager.writeControlData(oControl);
oRenderManager.addClass("myStyle");
oRenderManager.writeClasses();
oRenderManager.write(">");
oRenderManager.renderControl(oControl.getAggregation("_hBox"));
oRenderManager.write("</div>");
}
});
});
I still have problems with the association handling (updated code) I guess handling the association should be done different? Sometimes the input field is still null.
a control can only be aggregated by one control at a time.
This is the difference between associations (control may be at multiple at the same time) and aggregations.
What you can do in your init is:
this._decreaseButton = new Button (...)
Basically you only need one aggregation for your HBox.
If your buttons are then aggregated by the HBox they will know the models of the parent and also be destroyed.
The only thing you need to check if your Root control is a Ancestor of the created controls (use myControl.getParent()).
best regards,
Tobias
I'm working on a donut chart type, with the Highcharts library.
As you can see in the image below, some of the inner data labels are overlapped.
I've been playing with the parameter "distance" but doesn't fix this.
Find attached the code below,
// Create the chart
$(container).highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
symbol: 'url(/icon-turn-down.png)'
}
}
},
title: {
text: _title,
margin: 50
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
formatter: function() {
var s = this.point.name.split('.');
if (s.length == 1) {
return this.y > 1? '<b>'+this.point.name+':</b> '+Highcharts.numberFormat(this.point.y) : null;
}
return this.y > 1? s[0]+'<br /><b>'+$.trim(s[1])+':</b> '+Highcharts.numberFormat(this.point.y) : null;
}
},
series: [{
name: '',
data: innerData,
size: '80%',
dataLabels: {
formatter: function() {
return this.y > 0 ? this.point.name : null;
},
color: 'white',
distance: -50
}
}, {
name: '',
data: outerData,
size: '100%',
innerSize: '80%',
dataLabels: {
formatter: function() {
var s = this.point.name.split('.');
if (s.length == 1) {
return this.y > 1 ? '<b>'+ this.point.name+':</b> '+ Highcharts.numberFormat(this.point.y) : null ;
}
s = this.point.name.substring(this.point.name.indexOf(".")+2);
return this.y > 1 ? '<b>'+ s+':</b> '+ Highcharts.numberFormat(this.point.y): null;
},
style: {
fontSize: "10px",
fontColor: "#000000"
}
}
}]
});
Finally, I found a solution, which is playing with the "startangle" attribute.
series: [{
name: '',
data: innerData,
startAngle:110,
size: '80%',
dataLabels: {
formatter: function() {
return this.y > 0 ? this.point.name : null;
},
color: 'white',
distance: -45
}, {
...
Distance parameter cannot be applied for each point, only general, so only what comes to my mind is iteared on each datalabel and use translate() function, or use formatter, apply CSS class and dhten use top/left parameter for each element. But will be helpful if you recreate your example as fiddle.
I have the following code to contruct a pie chart.
The problem is i don't get a shadow.
Note : If the chart config, theme='Base', then the pie has a shadow
Ext.define('ChartPanel', {
extend: 'Ext.panel.Panel',
//------------------CONSTRUCTOR
, constructor: function(externalConfigs) {
externalConfigs = externalConfigs || {};
var configs = {
title: 'My panel',
items: [
{
xtype: 'chart',
store: myStore,
width: '30%',
series: [{
type: 'pie'
, field: 'persentage'
, shadow: 'sides'
, showInLegend: false
, donut: false
, renderer: function(sprite, record, attributes, index, store) {
if (record.data.description == 'option1') {
sprite.setAttributes({
fill: 'url(#redGradient)',
stroke: '#ffffff'
}, false);
} else if (record.data.description == 'option2') {
sprite.setAttributes({
fill: 'url(#greenGradient)',
stroke: '#ffffff'
}, false);
}
}
}]
, gradients: [{
id: 'redGradient',
angle: 45,
stops: {
0: { color: '#820000' },
100: { color: '#BD1E00' }
}
}, {
id: 'greenGradient',
angle: 0,
stops: {
0: { color: '#89AC10' },
100: { color: '#A1C22D' }
}
}]
}
]
}
Ext.apply(configs, externalConfigs);
this.callParent([configs]); //Call the parent constructor
}
});
Any ideas how to get a shadow?
Thanks
Use shadow: true (see the docs in the previous link to see other possible options) within your chart definition. (Not within the pie definition). There is no shadow config property for Ext.chart.series.Pie. You would need to use shadowAttributes within Ext.chart.series.Pie.
I found that
return attributes;
inside the renderer is essential.