Card layout is display to top right of the application. I need to make it to appear center of the screen.
I have tried setting up the layout
align: 'center'
&
pack: 'center'
No go.
Ext.define('DataARCH.view.data.RestConnectionPopup', {
extend: 'Ext.window.Window',
alias: 'widget.restConnectionPopup',
// autoShow: 'true',
// bodyStyle: {
// background: 'white'
// },
// height: 460,
// width: 380,
// title: config.BRAND_SHORT + ' Publisher: REST Connection',
// constrain: true,
// resizable: false,
controller: 'publishdatacontrol',
initComponent: function () {
//Card Layout
console.log("helo");
var cards = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
requires: ['Ext.layout.container.Card'],
layout:
{
type: 'card',
align: 'center'
//pack: 'center'
},
region: 'center',
width: 600,
height: 200,
bodyPadding: 15,
defaults: {
border: false
},
defaultListenerScope: true,
Fixed my removing the following lines.
renderTo: Ext.getBody(),
region: 'center',
width: 600,
height: 200
Related
I have a Piechart made of highcharts plugin,Its working fine and my legend is also working fine.But here the value of 'y' that is 12,10,33 is not showing with my legend.I need to show this value with % for ex: yellow slice-12% ,Red Slice-10% etc.,Below is my code.Thanks in advance.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500"></div>
Javascript
$(document).ready(function(){
});
</script>
</head>
<body>
<div id="container" style="height: 400px; width: 500"></div>
<script>
$(function () {
new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
height: 450,
width: 450
},
credits: {
enabled: false
},
title: {
text : '',
},
plotOptions: {
pie: {
shadow: false,
borderWidth: 0
}
},
tooltip: {
enabled: false
},
legend: {
align: 'right',
layout: 'vertical',
verticalAlign: 'top',
x: 0,
y: 0
},
series: [{
innerSize: '60%',
outerSize: '40%',
showInLegend: true,
data: [
{name: 'Yellow Slice', y: 12, color: 'yellow'},
{name: 'Red Slice', y: 10, color: 'red' },
{name: 'Blue Slice', y: 33, color: 'blue'},
{name: 'Green Slice', y: 20, color: 'green'}
],
dataLabels: {
enabled: false,
}
}]
});
});
You want the dataLabels.formatter. https://api.highcharts.com/highcharts/series.pie.dataLabels
There are also a bunch of settings you can change to adjust the placement and the connector.
https://jsfiddle.net/jsormpjj/
$(function() {
new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
height: 450,
width: 450
},
credits: {
enabled: false
},
title: {
text: '',
},
plotOptions: {
pie: {
shadow: false,
borderWidth: 0
}
},
tooltip: {
enabled: false
},
legend: {
align: 'right',
layout: 'vertical',
verticalAlign: 'top',
x: 0,
y: 0
},
series: [{
innerSize: '60%',
outerSize: '40%',
showInLegend: true,
data: [{
name: 'Yellow Slice',
y: 12,
color: 'yellow'
},
{
name: 'Red Slice',
y: 10,
color: 'red'
},
{
name: 'Blue Slice',
y: 33,
color: 'blue'
},
{
name: 'Green Slice',
y: 20,
color: 'green'
}
],
dataLabels: {
enabled: true,
formatter: function() {
return this.point.name + ' - ' + this.point.y + '%';
}
}
}]
});
});
http://jsfiddle.net/6kjuf1aa/
Highcharts.chart('container', {
chart: {
width: 458,
height: 98
},
title: {
text: ""
},
legend: {
align: 'center',
verticalAlign: 'middle',
layout: 'vertical'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
startAngle: 0,
endAngle: 360,
center: ['10%', '80%']
}
},
series: [{
type: 'pie',
name: 'hi',
innerSize: '75%',
data: [
{
y: 23,
name :"abc"
},
{
y: 23,
name :"abc"
},
{
y: 23,
name :"abc"
}
,
{
y: 23,
name :"abc"
},
{
y: 23,
name :"abc"
},
{
y: 23,
name :"abc"
}
],
showInLegend: true
}]
});
Is there a way to move the navigation bar to bottom and give more space for the legends so that more legend items could be displayed
How do i achieve this?
I want to display at least 3 items on screen by moving the navigation bar
You can remove the padding and margin around the legend to have it take up more space. I found with a padding of 0 the circles were getting clipped, so I reduced their size also.
legend: {
align: 'center',
verticalAlign: 'middle',
layout: 'vertical',
margin: 0,
padding: 0,
symbolHeight: 10,
verticalAlign: 'middle',
// maxHeight: 62 // If you really only want 3, uncomment this
},
http://jsfiddle.net/6kjuf1aa/1/
Is it possible to create a progress chart in Highcharts like this:
https://0.s3.envato.com/files/84221450/screenshots/weblator_responsive_charts_7_bootstrap.jpg
I believe a bar chart can be customized to create this. But is it possible to change the styling so that no axes are showing and the bar labels are positioned above the bars rather than preceding them?
Possible to recreate but it is not so dynamic( in style ). So you have to adjust css according to data series in chart.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
marginBottom: 120
},
legend: {
enabled: false
},
colors: ['#173c64'],
xAxis: {
categories: ['option 1', 'option 2', 'option 3', 'option 4 ', 'option 5 '],
labels: {
align: 'left',
x: 5,
y: -20, /* to be adjusted according to number of bars*/
style: {
fontSize: "1rem",
color: '#000'
}
},
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
plotOptions: {
bar: {
stacking: "normal",
//groupPadding: 0, //add here
//pointPadding: 0, //add here,
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
title: {
margin: 0,
useHTML: true,
text: "Test",
style: {
"color": "#333333",
"fontSize": "1.5rem",
"fontWeight": "bold"
}
},
series: [{
data: [{
y: 100,
color: '#99ddff'
}, {
y: 10,
color: '#ff8c1a'
}, {
y: 20,
color: '#ff471a'
}, {
y: 60,
color: '#c299ff'
}, {
y: 10,
color: '#99ddff'
}]
}]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Then again, here I am struggling to work with the plot of pie charts.
When I use useHTML as true it renders exactly as I want (respecting itemWidth too), but when I click in the legend it stops respecting itemWidth and the items overlap. JSFiddle
Code:
$(function () {
$('#container').highcharts({
chart: {
renderTo: 'container',
height: 660,
width: 400,
},
title: {
text: 'Example',
},
plotOptions: {
pie: {
center: [200, 50],
size: '150',
innerSize: '75%',
dataLabels: {
enabled: false,
},
showInLegend: true
}
},
legend: {
useHTML:true,
verticalAlign: 'top',
floating: true,
itemWidth: 180,
y: 200,
itemStyle: {
fontSize:'12px',
fontWeight: 'light',
width: 160
}
},
series: [{
type: 'pie',
data: [['Aaaaaaaaaaaaa aaaaaaaaaaaaa',0.0516218483578],['bbbbbbbbbbbbbb bbbbbbbbbbbbbbbb ',0.257286564668],['cccccccccccccccccc',1.12221284311],['dddddddd ddddddddd',1.1265250728],['rrrrrrr rrrrrrrrrrr',0.17346294958],['Aaaaaaaaaaaaa aaaaaaaaaaaaa ',1.20890386677],['ffffffff ',0.459460369787],['gfdgdfgdfg ',6.13592008543],['Aaaaaaaaaaaaa aaaaaaaaaaaaa ',0.395214054153],['Aaaaaaaaaaaaa aaaaaaaaaaaaa',0.366061664716],['dddddddddd',0.149098291043],['Aaaaaaaaaaaaa aaaaaaaaaaaaa',0.0957028394272],['tttttttttttt ',3.48603058953],['Aaaaaaaaaaaaa aaaaaaaaaaaaa',1.6316529146],['fdsfsdfsd .',1.34404210477],['Aaaaaaaaaaaaa aaaaaaaaaaaaa',0.350541259163],['Aaaaaaaaaaaaa aaaaaaaaaaaaas ',0.45563482302],['gdffdgdgg ',0.601007305701],['Aaaaaaaaaaaaa aaaaaaaaaaaaa',1.07655357912],['Aaaaaaaaaaaaa aaaaaaaaaaaaa ',0.145888955634],['Aaaaaaaaaaaaa aaaaaaaaaaaaa',13.0487584317],['dasdasfsafsaf',1.79394965159],['Vesdfsdrde ',3.41252042196],['Aaaaaaaaaaaaa aaaaaaaaaaaaa ',0.258638673662],],
}]
});
});
How can I keep the formatting even after clicking in the legend?
It seems the bug was solved in the recent releases.
I'm looking for a way to have text in the center of a donut chart change on hover. When there is no hover state, the center will display the total amount (here I am representing vacation days, so it may be 15 vacation days). When hovering, the text in the center needs to match the segment hovered over (available, requested, and taken vacation days), but I cannot figure out how to change the text in the center based on hover. Does anyone have any ideas? Any help is greatly appreciated!!
http://jsfiddle.net/NVX3S/146/
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="min-width: 300px; height: 300px; margin: 0 auto"></div>
$(function () {
var colors = ['#8d62a0', '#ceb3d8', '#d5dddd'];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'pie',
height: 250,
width: 250,
borderRadius: 0
},
credits: {
enabled: false
},
title: false,
tooltip: false,
plotOptions: {
pie: {
borderWidth: 6,
startAngle: 90,
innerSize: '55%',
size: '100%',
shadow: true,
// {
// color: '#000000',
// offsetX: 0,
// offsetY: 2,
// opacity: 0.7,
// width: 3
// },
dataLabels: false,
stickyTracking: false,
states: {
hover: {
enabled: true
}
}
}
},
series: [{
data: [
{y:65, color: colors[0]},
{y:15, color: colors[1]},
{y:20, color: colors[2]}
]
// data: [
// ['Firefox', 44.2],
// ['IE7', 26.6],
// ['IE6', 20],
// ['Chrome', 3.1],
// ['Other', 5.4]
// ]
}]
},
function(chart) { // on complete
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the text
chart.renderer.text('126.5', 103, 127).css({
width: circleradius*2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
});
Use points.events.mouseOver/mouseOut, for example: http://jsfiddle.net/NVX3S/147/
Code:
point: {
events: {
mouseOver: function(){
this.series.chart.innerText.attr({text: this.y});
},
mouseOut: function(){
this.series.chart.innerText.attr({text: 112});
}
}
}
Where innerText is just custom property, created like this:
chart.innerText = chart.renderer.text('112', 112, 125).css({ ... }).add();