I've tried everything I can. If anyone can help me out, it'll be great. I want the numbers on the graphs and the legend gone
Legend and data-labels can be disabled by
const options = {
dataLabels: {
enabled: false
},
legend: {
show: false
}
}
EDIT
If you want to remove all the additional graphics, try using sparkline which will only keep the chart and hide everything.
sparkline: {
enabled: true
}
I know how to centered it by use this option:
title: {
text: "This is title",
align: "center",
verticalAlign: "middle",
},
it works fine , but when there is a legend aligned in right or left , it will not perfectly displayed in the center , to add a x position to adjust it is ok ,but not responsive. when you change the window size , it will has some offsets.
here is the demo:
https://stackblitz.com/edit/react-highchart-jjzjx118
I tried use load/redraw to adjust it , but I don't know why it not work when I bind redraw function to react component, I will do some further action in it so I can't define it when I create the option.
You can position a title in a render callback function:
chart: {
events: {
render: function() {
var seriesElPos = this.seriesGroup.getBBox();
this.title.attr({
x: seriesElPos.width / 2 + seriesElPos.x
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4760/
API Reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
https://api.highcharts.com/highcharts/chart.events.render
I've searched extensively for this issue here and haven't been able to figure this out. I have a google chart in my app and have a callback function in place to get the details of each point when selected so that I can update a modal to display more info elsewhere.
However, when I have this callback activated and the user clicks the item, the crosshairs do not stay. When I don't have the callback active, they do remain and I get a nice small circle around the selected point like this:
image of crosshairs
Here are the chartevent details I have in place which are working to return the details of the point. Is the chartevent option perhaps overriding a crosshair default?
Grateful for any advice.
Cheers.
const chartEvents = [{
eventName: "select",
options: {
tooltip: {
trigger: "selection"
}
},
callback: ({ chartWrapper }) => {
const chart = chartWrapper.getChart().getSelection()[0].row;
this.setState((prevState) => ({ selectedMonth: chart }))
this.setChangedMonth()
}
}]
I'm trying to make a carousel for displaying images, I got most of the functionality from a solution someone in sencha forums came up with. I made a few adjustments to the code and got it working at first glance.
Here's the original code on sencha forums...
http://www.sencha.com/forum/showthread.php?256456-an-Ext-JS-4-carousel-component&p=938789#post938789
This didn't work on ExtJS 4 so I made a few modifications for it to work and also to make it look better (to my eyes). Here's how it looks
I do have a problem or two though...
First off I can't figure out how to add a text over the images I'm displaying, I managed to add that line of text in the center but I also want to add a date to the images and that should display on top of each image container. I think it's pretty basic, but I can't figure out how... I don't have a full understanding of HTML, so that's not helping.
Secondly, and most important, I'm getting some weird behaviour when I close and reopen the window containing this carousel. I've seen this kind of behaviour before when using the same ID in multiple instances of a view in ExtJS, but I have changed all IDs to generate a new one whenever a new carousel window opens and still experience the same problem.
Here's what happens when I close and reopen the window...
And that happens with every window I open after closing the carousel
And last but not least!! I can't get the keydown event to work on this window, I have no clue why. I've tried setting the listener on the carousel container instead of the window but still get no firing whatsoever.
This is the code I'm using to create the carousel window...
var win = Ext.create('Ext.view.CarouselWindow');
win.show();
Ext.createWidget('carousel',{
xPos: win.getSize().width/2,
yPos: win.getSize().height/4,
FPS: 70,
reflHeight: 56,
height:'100%',
width:'100%',
reflGap:2,
bringToFront:true,
store:store,
images:store,
altBox:'imageNameLabel',
autoRotate: 'no',
renderTo: 'carousel-div',
listeners:{
keydown:function(){
console.log('asdasd')
}
}
});
This is the initComponent of the carousel component, which is rendered in the window.
initComponent: function(config) {
this.callParent(arguments);
this.container = this.renderTo ? Ext.get(this.renderTo) : this.up('container');
if (this.xRadius === 0){
this.xRadius = (this.container.getWidth()/2.3);
}
if (this.yRadius === 0){
this.yRadius = (this.container.getHeight()/6);
}
this.xCentre = this.xPos;
this.yCentre = this.yPos;
// Start with the first item at the front.
this.rotation = this.destRotation = Math.PI/2;
this.timeDelay = 1000/this.FPS;
// Turn on the infoBox
if(this.altBox !== '')
// Ext.get(this.altBox).applyStyles({display: 'block'});
if(this.titleBox !== '')
Ext.get(this.titleBox).applyStyles({display: 'block'});
//
// Turn on relative position for container to allow absolutely positioned elements
// within it to work.
this.container.applyStyles({ position:'relative', overflow:'hidden'});
// Setup the store.
this.initStore();
this.setUpContainerListener();
this.innerWrapper = this.container.createChild({
tag: 'div',
style: 'position:absolute;width:100%;height:100%;'
});
this.checkImagesLoaded();
},
And here's the Image component that the carousel uses...
/**
* #author Aymen ABDALLAH <aymen.abdallah#gmail.com>
* #docauthor Aymen ABDALLAH
*/
Ext.define('Ext.component.Image', {
config: {
orgWidth: 400,
orgHeight: 400,
reflHeight: 0,
reflOpacity: 0,
itemIndex: 0,
image: null,
reflection: null,
container: null,
alt: '',
title: '',
imageSrc: '',
imageOK: false
},
// id: '',
constructor: function(config){
this.initConfig(config);
this.imageOK = true;
this.image = new Ext.Element(document.createElement('img'));
this.image.set({
// id: this.id,
src: this.imageSrc,
class : 'carousel-image',
alt: this.alt,
title: this.title
});
this.image.setStyle({position : 'absolute'}); // This seems to reset image width to 0 on webkit!
},
setUpReflection: function(){
if (this.reflHeight > 0)
{
this.reflection = Ext.create('Ext.component.Reflection', {
imageHeight: this.orgHeight,
imageWidth: this.orgWidth,
image: this.image,
parent: this.container,
reflHeight: this.reflHeight,
reflOpacity: this.reflOpacity
});
}
},
generateId: function(){
// return Ext.data.UuidGenerator.create().generate();
},
getImage: function(){
return this.image;
}
});
I didn't want to flood this with code so I restricted to what I think might be useful, there might be some missing though, in that case just tell me and I'll update the post with the portion of the code you need.
EDIT
Here's a link to sencha fiddle showing the carousel and the error. To see the second error open the carousel by clicking the button, close it with ESC and then try to open it once again. You'll notice it either doesn't show or it shows like the screenshot I posted.
https://fiddle.sencha.com/#fiddle/2iu
EDIT 2
Just found out the problem comes from the images, if I comment these lines:
this.image = new Ext.Element(document.createElement('img'));
this.image.set({
id: this.id,
src: this.imageSrc,
class : 'carousel-image',
alt: this.alt,
title: this.title
});
the second error I listed disappears. Of course this is not a solution as the carousel won't display any image this way, but I thought this could be a useful piece of data for anyone interested in helping.
For those who visit this page (I know it's an old post),
The issue isn't actually with the second view, the first view causes a layout error.
The Ext.component.Image class is missing a render function, to fix this add
render: function () {
return;
}
to the class.
Not sure how to fix the other issue entirely, but you could change the image component to be a form/panel and have text, or use the caption tags.
Labels on the pie chart are fine to me.
Labels outside of the pie chart are not, I would like to make these disappear since on Iphone or a screen that size, labels pop out of the pie chart and are out of the screen most of the time.
I did not find anything in Sencha Architect that allowed me to overide this mechanism for labels. Would someone have an idea?
You have to extend Ext.chart.series.sprite.PieSlice and override the method sliceContainsLabel:
Ext.define('yourNamespase.CustomPieSlice', {
alias: 'sprite.custompieslice',
extend: 'Ext.chart.series.sprite.PieSlice',
inheritableStatics: {
def: {
defaults: {
doCallout: false,
rotateLabels: false,
label: '',
labelOverflowPadding: 10,
renderer: null
}
}
},
sliceContainsLabel: function () {
return 1;
}
});
And so the labels will be always inside the pie chart.