I am using high charts, In that how to have legends vertically aligned legends with more columns(instead of having a navigation for legends), js
fiddle
https://jsfiddle.net/aarthi_101/ruw8t3p9/6/
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
itemMarginBottom: 5
}
You can achieve that look of the legend with a help of a little trick. Change the type of the legend to floating and set spacingRight to create the space for the legend. Notice that it's done with the default horizontal layout. legend.width & legend.itemWidth allow you to make sure that 2 columns will be used (width / itemWidth has to be higher or equal to 2 and lower than 3). legend.x adjusts the position of the whole legend.
chart: {
marginRight: 200,
(...)
},
legend: {
floating: true,
align: 'right',
itemMarginBottom: 5,
width: 180,
x: 25,
itemWidth: 90
},
Live demo: https://jsfiddle.net/BlackLabel/avo0cgnt/
API reference: https://api.highcharts.com/highcharts/
Related
I am working on a vue.js project and I am using the v-charts plugin. I cannot get the legend to display for any of the line graphs I am producing. I am able to produce the appropriate chart with x-axis and y-axis labels and a title for the chart. I have tried altering a ton of different options for the legend. I have also imported the legend component for e-charts individually.
I have tried multiple different formatting options for the legend.I have started a new project without any styling and still no luck. I'm sure there's something simple going on with my options object but I cannot figure it out.
Has anybody else ever run into this and found a solution?
I have been using this site as a resource for years and never asked a question. I can't figure this one out.
The chart options bar is being set in a function and the data is represented appropriately on the graph. I just need to be able to display the legend.
Code snippets and screenshot of graph below:
<template>
<div class="standard_div">
<!-- Begin chart component of graph -->
<v-chart v-if="showChart" :options="chartOptionsBar"/>
<!-- End chart component-->
</div>
</template>
<script>
// Import a different instance ECharts into the .vue file.
import ECharts from 'vue-echarts';
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
</script>
chartOptionsBar = {
xAxis: {
// The data for the series
data: this.xAxisSeries,
// Parameters for the x axis
name: this.x_axis,
nameLocation: 'middle',
nameTextStyle: {
padding: [20, 20, 20, 20],
fontWeight: 'bold',
}
},
yAxis: {
// Parameters for the x axis
name: this.y_axis,
nameLocation: 'middle',
nameTextStyle:{
padding: [25, 25, 25, 25],
fontWeight: 'bold',
}
},
series: [
{type: 'line', data: this.yAxisSeries},
],
legend:{
top: 'auto',
left: 'auto',
right: 'auto',
bottom: 'auto',
width: '50%',
orient: 'horizontal',
lineHeight: '56',
padding: 25,
type: 'plain',
zlevel: 20,
data: ["item0"]
},
title:{
show: true,
text: this.graphTitle,
x: 'center',
textStyle: {
fontSize: 20,
}
},
};
The link includes an image of the graph that was produced from the options bar above.
I had the same problem and importing the legend using
import 'echarts/lib/component/legend'
in my component worked for me!
Try to play with positioning props
I am using the names property to label a scatter chart legend. I have not been able to find a way to only show the legend for only data14, data15, data16 and data17 and hide the legend elements for data1 through data13.
data1 through data13 will always be the same, data14 through data17 could expand or collapse in number and the label text will change.
names: {
data1: '2%',
data2: '5%',
data3: '10%',
data4: '15%',
data5: '20%',
data6: '25%',
data7: '30%',
data8: '35%',
data9: '40%',
data10: '45%',
data11: '50%',
data12: '55%',
data13: '60%',
data14: 'Oracle',
data15: 'HP',
data16: 'MS',
data17: 'Oracle'
},
Set your chart legend not visible:
legend: {
show: false
}
Then, make the legend visible only with elements you want:
chart.legend.show(['data14', 'data15', 'data16', 'data17'])
Im trying to create a carousel where, apart of the active item, the user can preview part of the next and previous items. I made a draw to illustrate it:
I tried things like padding or margin, but anything works.
Here's a carousel to play with: http://jsfiddle.net/XpG8v/
Ext.Viewport.add({
xtype: 'carousel',
height: 300,
width: 300,
items: [{
style: 'background-color: #00ffff;'
},{
style: 'background-color: #ff00ff;'
},{
style: 'background-color: #ffff00;'
}]
});
Thanks!
Simply set the 'itemLength' config to a fixed value, for example:
Ext.Viewport.add({
xtype: 'carousel',
itemLength: 200,
// ...
});
I'm getting a scrollbar in the Viewport, how can I remove it.
I know that is a strange situation because in the documentation we have this :
The Viewport does not provide scrolling, so child Panels within the Viewport
should provide for scrolling if needed using the autoScroll config.
from viewport sencha doc
My Viewport :
Ext.define('MyViewport', {
extend : 'Ext.container.Viewport',
layout : 'border',
padding : '5 5 5 5',
defaults: {
split: true,
autoScroll : false
},
initComponent : function() {
this.items = [{
region: 'north',
height: 70,
width : '100%',
split : false,
padding : '0 0 5 0',
items:[{
//here some items
}]
},{
region:'west',
collapsible: true,
width: 210,
maxWidth : 210,
autoScroll : false,
items:[{
//here some items
}]
},{
region:'center',
id : 'workspace',
//here I add panels dynamically
}];
this.callParent(arguments);
}
});
am I missing somthing ?!
Like the docs say, a viewport will never get a scrollbar applied directly on to it automatically.
But each of your regions are Ext.panel.Panel components by default which automatically get a scrollbar on overflow.
Try adding a layout: fit config to your viewport.
If that doesn't handle it, add the same config to the panel component that has the scroll bars.
Suppose I have 3 different Panels [bottomCar0,bottomCar1,bottomCar2] and want to adjust the height and width of them as per my requirement, how can i do that??
My Code :
var bottomCar=new Ext.Panel({
layout:{
type:'hbox',
align:'stretch'
},
defaults:{
flex:1
},
items: [bottomCar0,bottomCar1,bottomCar2]
});
how can i change the defaults??
Thnaks
Sneha
The thing is, that you setted flex:1. This will give the property flex:1 to each one of your items. This will force them to capture the available space, accordingly the remaining space, devided by the number of the setted flex objects.
Like if u have, in your case, 3 items with flex:1, than each will get 33% of the available height.
What you need to do is remove the flex from the defaults and give it to the panel itself, than set the dimensions.
You can set inside the defaults the height and width, if all of them will get the same values
defaults:{
height: 200,
width: 300
}
or set to each item its height and width
items: [
{
title: 'Home',
iconCls: 'home',
height: 200,
width: 300
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen',
height: 100,
width: 150
}
]
More on Flex
Shlomi.
OR you can add "cls" to your panel and adjust it in css file.