I am trying the center the title of the echarts component by setting
title:{
text: "My Title",
textStyle:{
align: "center"
}
}
But it is not working.
I have referred the official document(https://echarts.apache.org/option.html#title.textStyle.align) on this.
JSFiddle link : http://jsfiddle.net/jeffersonswartz/y8zs5coq/5/
Thanks.
That should be title.left = 'center' instead of title.textStyle.align. Help you updated at http://jsfiddle.net/ovilia/06u9xpj4/ .
title.textStyle.align is used to align the text within the position. For example, if you set title.textStyle.width and title.textStyle.align, they can work together.
This also works great:
title : {
text:"foo",
subtext:"bar",
x:'center'
}
You have to set title.left property to center:
title: {
text: 'My Title',
left: 'center',
},
JSFiddle link: http://jsfiddle.net/xguL0vrk/
Also tested with ECharts 5.0.1
Related
I want to give vertical height manually in a bootbox prompt.
Here is the bootbox, We can fix it exactly in the center but I want to place it slightly above.
$('#btnNewPra').on('click',function(){
bootbox.prompt({
size: "small",
title: 'Spot',
margin: '50px' ,
// centerVertical: true,
callback: function(result){
}
})
})
Your simplest option is to use the className option and some custom CSS, like so: https://jsfiddle.net/6vmjpx3y/
bootbox.prompt({
size: "small",
title: 'Spot',
className: 'mini-box',
centerVertical: true,
callback: function(result) {
}
})
and
.mini-box .modal-dialog-centered .modal-content {
margin-top: -50px;
}
The className value would be whatever makes the most sense for you. There are probably other ways of accomplishing this, but using the centerVertical option adds the .modal-dialog-centered class to the dialog wrapper. You can then apply a negative margin to the .modal-content class (the outermost "visible" part of the modal) to pull the dialog up your desired amount from the center of the viewport.
I need to add an image on the header of a freestyle portal site which when clicked should open a new window with a specific URL.
Currently tried adding the below code but it appears very small, just like a profile picture. But our requirement is to make it appear more like a logo and on the right side (as an header end item).
var oImageItem = new sap.ushell.ui.shell.ShellHeadItem("imageId", {
icon: "/images/image1.png",
tooltip: "Click here",
//height: "100%",
showSeparator: false,
href: "HarcodeURL",
target: "_blank"
});
oRendererExtensions.addHeaderEndItem(oImageItem);
This link could be very interesting: How to place logo or icon at the Center of Unified Shell header?
You have to change "Center" to "Right" and "Icon" to "Image"
That would look like this:
var oShell = new sap.ui.unified.Shell("oShell", {
header: [
new sap.m.FlexBox({
justifyContent: sap.m.FlexJustifyContent.Center,
items: [
new sap.ui.core.Icon({
src: "sap-icon://home"
})
]
})
]
});
You also could change the "FlexBox" to a "VBox".
This element doesn't exist. Use the "sap.m.Image" element. (SDK sap.m.Image)
Code with XML: <m:Image src="/images/image1.png" width="100px" press="openNewWindow">
Code with JS:
var oImageItem = new sap.m.Image("imageId", {
src: "/images/image1.png",
tooltip: "Click here",
width: "100px",
press="openNewWindow"
});
Press Event in Controller:
openNewWindow: function(){
window.open("https://www.hypej.com");
},
I have a basic chart with a custom label, eg:
labels: {
items: [{
html: 'Testing Label',
style: {
left: '50px',
top: '50px'
}
}]
}
This works, but I'd like to position the label from the right side, I tried doing:
style: {
right: '50px',
top: '50px'
}
but this doesn't work...
JsFiddle link:
http://jsfiddle.net/0ze2u47h/3/
It seems that right property is not supported in chart.labels. For more complex configuration you can render the label using SVGRenderer:
chart: {
events: {
load: function() {
var chart = this,
renderer = chart.renderer;
var label = this.renderer.label('Test label', null, 100).add();
label.attr({
x: chart.plotWidth + chart.plotLeft - label.width
});
}
}
}
Live demo: http://jsfiddle.net/kkulig/aob1e197/
The advantage of rendering labels via renderer (not via constructor options) is that you can access parameters of the already created chart and label (chart.plotWidth, chart.plotLeft, label.width in this case).
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
I have tried to set a title for my vizFrame chart in SAP UI5, I have used title attribute in vizFrame control in my view, but it is not working and showing a default title as "Title of Chart". Could someone please help me how to set a title to it.
There are 2 possibilities:
Set it in Javascript code (e.g. in 'onInit' of the controller):
var oChart = this.getView().byId("idVizFrame");
var asyncChartUpdate = function() {
oChart.setVizProperties({
title: {
text: "Your title"
}
});
};
setTimeout(asyncChartUpdate, 0);
I did this asynchronously because it didn´t work for me synchronously.
Set it in XML view:
<viz:VizFrame id="idVizFrame"
vizProperties="{ title: {text : 'Your Title', visible : true}}"
width="100%" vizType="column" uiConfig="{applicationSet:'fiori'}">
in Javascript it is work as synchronously.
code should be:
oChart.setVizProperties({
title: {
text: "Your title",
visible : true
}
});
I want to change the color of plot numeric values(1000, 2000...9000) as shown in below snapshot. I couldn't find an option to do so in highcharts api.
Whilst your comments are't that clear I believe you want the xAsis lines color changed:
xAxis: {
lineColor: '#FFFFFF'
}
Add the above to the highcharts object: graph.highcharts({});
See here for more details: http://api.highcharts.com/highcharts#xAxis
Edit
In that case you'll still want the xAsis. Thankfully highCharts let us do things as simply as CSS:
xAxis: {
labels: {
style: {
color: '#fff'
}
}