I am using Highcharts. How do I control the chart Title and Subtitle so it looks good on desktop, ipad and iphone? Now the Title and Subtitle are overlapping (see image) on iphone 5 (and 6). I want some bottom margin on the Title.
You can play around with the marginTop property for the chart itself, or the x/y properties for the title or subtitle objects.
chart: {
type: 'line',
marginTop: 100
}
subtitle: {
text: 'Your text',
y: 100
}
Demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/margintop/
Demo2: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/title/y/
Related
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
I currently have a map loaded, and I have some bars on the map. I would like to include my variable text_toltip[i] in the tooltip so that the coordinates and text of the variable text_toltip[i] are displayed in each bar. how can I do it? I'm new in this library.
I know that there is an attribute called minHeight, which allows to establish a minimum height for the bars, but I would like to establish a maximum predetermined size for the bars and so the other sizes and colors of the bars are calculated. how can I do it?
series: [{
type: 'bar3D',
coordinateSystem: 'geo3D',
barSize:0.05,
minHeight:0.05,
data: data.map(function (item) {
return {
value: [item[0], item[1], item[2]],
label: {
show: false
}
}
}),
shading: 'lambert'
}]
https://plnkr.co/edit/Tdwwk8yKCi0fiY7I3AqK?p=preview
Thank you.
For this question,I read the Echarts's documentation and found a property belonging to "geo3D called "boxHeight" ,which can play the same role as you say "maxheight".I've tested it,no problem.
boxHeight
I am working on EXTJS Gauge chart.
In the gauge chart label I am trying to add % after the label value like 10%, 20% etc.
I am not able to get the value of the label.
Can any one help me to get the value of the label, so that I can draw label with returning value + '%' using drawLabel function.
Here is the image of my gauge.
Thanks in Advance
Got the answer from following link:
Change field labels on an ExtJS chart
Added following lines after the comment:
axes: [
{
type: 'gauge',
position: 'gauge',
minimum: 0,
maximum: 100,
steps: 10,
margin: 10,
/*These lines added*/
label:
{
renderer: function(value)
{
return value + "%";
}
}
}],
Now the label text is changed.
Thanks
When using Sencha Touch to create a panel - you can tell the panel to enable a fullscreen property. THe panel will fill the space available by the device.
It seems to have a bug or not deal with a bookmark that has been saved to the home screen - and floats underneath the status bar at the top.
Is there a property or setting to manage this behaviour OR are am I going to have to program the logic to determine how much padding is required dependent on device and orientation ?
Example below will fit nicely in mobile Safari, but if you save to Home Screen and load it up - the Toolbar sits underneath the Status Bar.
var buttons = [
{text: 'Button'},
{xtype: 'spacer'},
{text: 'Blue', ui: 'action'},
];
var toolbar1 = new Ext.Toolbar({
dock: 'top',
title: 'Panel',
items: buttons
});
var windowHeight = Ext.Element.getViewportHeight();
var windowWidth = Ext.Element.getViewportWidth();
var homePage = new Ext.Panel ({
fullscreen: true,
cls: 'homePage',
dockedItems: [toolbar1],
layout: 'fit',
html: '<h2>Testing Ext.js Panel</h2><p>Height:' + windowHeight +'</p><p> Width:' + windowWidth +'</p>',
animation: 'slide'
});
Thanks in advance.
Hi Ket — This is actually the default behavior... The status bar is always visible, even in a fullscreen web app. There are three tips you may find useful:
You can use a translucent statusbar, which is still there but will overlay your content. To do this, in Ext.setup(), you can use "statusBarStyle: 'black-translucent'"
"window.navigator.standalone" will detect whether you're in fullscreen mode or not.
Instead of measuring window width/height, you could break your H2 and P into separate components, and give the P area a layout of 'fit'
Hope that helps-
Quick one for any developers using appcelerator out there. I have two labels (This may even bew wrong) which are populated from an RSS feed. One label houses the title and another the description. The content for these comes from an RSS list which all works fine. THe issue I'm having is that some titles are longer than others so I cant fix label heights or it just wont work.
So with that in mind I set the titles height to be auto. The only problem is I cant reference this height from my second label to use the top: property to space it correctly.
Has anyone got any good suggestions?, Am I using the wrong type of Titanium UI method?
My current code is as follows
try
{
var current = Titanium.UI.currentWindow;
var selectedItem = current.item;
var description = selectedItem.getElementsByTagName("description");
var story = description.item(0).text;
var label = Ti.UI.createLabel({
text:selectedItem.getElementsByTagName("title").item(0).text,
left:5,
top:0,
height:"auto",
font:{fontSize:40}
});
current.add(label);
var story = Ti.UI.createLabel({
text:story,
left:5,
top:label.height,
height:"auto"
});
label.add(story);
}
catch(E)
{
alert(E)
}
minimumFontSize
the minimum size of the font when the font is sized based on the contents. Enables font scaling to fit and forces the label content to be limited to a single line
On the containing window / view, set the layout property to 'vertical' - this means the views are stacked on top of one another so your top value doesn't have to know the height of the previous component.
// Windows
var window = Ti.UI.createWindow({
layout: 'vertical',
backgroundColor: '#FFF'
});
var label = Ti.UI.createLabel({
width: 200,
height: 'auto',
text: 'some long text'
});
var label2 = Ti.UI.createLabel({
width: 200,
height: 'auto',
text: 'more long text',
top: 10 // This just adds some padding between the two labels
});
window.add(label);
window.add(label2);
window.open();