I'm trying to disable the from - to range selector that comes by default in highstocks. Looked up the api documentation but didn't find a solution. Thanks for the support!
In your chart config, set rangeSelector.inputEnabled false.
The accepted answer will only disable the Range Selector;
If you want to remove it completely, you need:
rangeSelector: {
enabled: false
},
you can use add inputEnabled:false
rangeSelector : {
inputEnabled:false
},
You can use for StockChart just like below:
this.chartData = new StockChart({
title: {
text: 'Data Chart'
},
rangeSelector: {
selected: 0,
inputEnabled: false
},
series: [{
tooltip: {
valueDecimals: 2
},
name: 'Chart',
data: [],
type: undefined
}]
});
Related
I have this error in console:
Highcharts warning: Consider including the "accessibility.js" module to make your chart more usable for people with disabilities. Set the "accessibility.enabled" option to false to remove this warning. See https://www.highcharts.com/docs/accessibility/accessibility-module.
Cannot find in documentation where Set the "accessibility.enabled" option to false.
This is the option that I pass to component:
const optionNUsersPerService = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Utenti per servizio'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Utenti',
colorByPoint: true,
data: getDataUsersPerService(props.items)
}]
}
And this is the component:
return (
<HighchartsReact
highcharts={Highcharts}
options={currentOptions}
immutable={true}
callback={props.callback}
/>
);
The warning has been added since Highcharts v10.1.0 (2022-04-29)
Changelog: https://www.highcharts.com/blog/changelog/
To disable accessibility, set:
accessibility: {
enabled: false
}
Live demo: http://jsfiddle.net/BlackLabel/mvnjskqr/
API Reference: https://api.highcharts.com/highcharts/accessibility.enabled
I don't advise that you disable accessibility for your charts, it will make them inaccessible to users with disabilities that rely on a keyboard and voice over software like NVDA, JAWS, VoiceOver etc.
An alternative way to get rid of this warning is to simply import the Accessibility module.
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import { useEffect, useState } from "react";
require("highcharts/modules/accessibility")(Highcharts);
Ref: https://github.com/highcharts/highcharts-react#how-to-add-a-module
Ref: https://github.com/highcharts/highcharts-react/issues/141
Sorry for the english ...
I got a chart with custom data grouping.
When I click to change the zoom, the new data are displayed over the previous one (which aren't deleted) :-(
rangeSelector : {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
}, {
type: 'all',
text: 'Month',
dataGrouping: {
forced: true,
units: [['month', [1]]]
}
}],
selected: 2
},
I found a fiddle with this problem :
http://jsfiddle.net/tqyyqmzs/12/
Month data are displayed.
Click on "Day" or "week" and you will see that month data sill be on the graph :-(
P.S : One or two month ago, this code works.
And now .... don't and I really don't understand why.
Did someone see the problem ?
Regards
David
Got the same problem on my website :
https://www.bdpv.fr/en/ficheUtilisateur.php?util=boyardgo
Click on panel "Production"
Then click on zoom "Mois".
Same behaviour, data for mois stay ...
I'm quite new inside JavaScript frameworks.
Recently, I've been working on a Man Machine Interface using Geoext, extJS and OpenLayers.
For the moment, I've a simple panel and I want it to display a map.
My code is like this :
(note that I'm not displaying there the OpenLayers code to make the map, but there is no point to do so)
var mappanel = Ext.create('GeoExt.panel.Map', {
title: "AZE TILE - AZE",
map: map,
center: '12.3046875,51.48193359375',
zoom: 6,
stateful: true,
stateId: 'mappanel',
});
And then, I have my Viewport :
Ext.create('Ext.container.Viewport', {
layout:'border',
id: 'BorderLayout',
defaults: {
collapsible: true,
split: true,
},
items: [
[...]
{
region:'center',
title:'Représentation',
xtype: 'tabpanel',
activeTab: 0,
split: false,
collapsible: false,
animCollapse: false,
margins: '5 0 5 0',
items: [
{
title: 'Tableau',
},
{
title: 'Carte', <- WHERE I WANT TO DISPLAY THE MAP CONTAINED IN THE PREVIOUS VARIABLE mappanel
},
{
title: 'Graphiques',
},
]
}
]
});
I don't know how to do this. I found an example in the Geoext2 website, but all they do is calling the variable like this :
items: [
mappanel
]
It is working but then, I can't add some more options to the items (like title).
I guess it is a simple work to get done but I can't figure out, forgive my newbiness :-) !
I don't know much about the GeoExt panel, nothing to be serious.
You can try to put your mappanel into another container:
items:[{
title: "AZE TILE - AZE",
items:[{
xtype: 'container',
items: [mappanel]
}]
}]
By the way your code:
items: [
{
mappanel
},
if mappanel is already an object, you don't have to use the curly brackets.
Easy answer by the way, I found it myself.
items: [
{
title: 'Tableau',
},
mappanel,
{
title: 'Graphiques',
},
]
I added exporting.js to my project, but when I checked the page it seems to add two extra buttons, but in my jsfiddle it does not, do you have any idea of what is causing this?
This is a diagram of my chart, can you see there are two buttons:
This is my jsfiddle:
http://jsfiddle.net/pLDeq/10/
exporting: {
enabled: true,
exportButton: {
enabled: true
},
buttons:
{
customButton:
{
//x: 20,
symbol: 'url(http://cdn1.iconfinder.com/data/icons/fatcow/16/chart_bar.png)',
onclick: function() {
setChartColumn([name,name2], categories, [data,data2], ['column','column']);
}
}
}
Fixed, the problem was in the theme, I just remove this lines.
exporting: {
buttons: {
exportButton: {
symbolFill: '#55BE3B'
},
printButton: {
symbolFill: '#7797BE'
}
}
},
I have a simple page with 2 or more grids and I want to use CellEditing plugin to edit cells of those grids.
If I have only a grid all works well, but if I make 2 grids (or more) CellEditing plugin stop to work.
Anyone know how to solve this problem?
I have made a little minimized example that is affected with this problem.
In this example you can try to add a row to the first grid and double click to edit that grid. As you can see cell editing doesn't work at all.
If you add and edit the cell in the second grid, it work.
here you can found the example in jsfiddle:
http://jsfiddle.net/eternasparta/amHRr/
and this is the javascript code:
Ext.require([
'Ext.form.*',
'Ext.tip.*']);
var store = Ext.create('Ext.data.Store', {
fields: ['label'],
data: []
});
Ext.define('AM.view.editpanel.CustomList', {
extend: 'Ext.container.Container',
alias: 'widget.sclist',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
plugins: [],
selModel: {
selType: 'cellmodel'
},
tbar: [{
text: 'Add',
actionId: 'add',
handler: function (th, e, eArg) {
var store = th.up('grid').store;
var r = Ext.create(store.model.modelName);
store.insert(0, r);
}
}],
height: 200,
store: store,
columns: [{
text: 'Name',
dataIndex: 'label',
flex: 1,
editor: {
xtype: 'numberfield',
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 30,
sortable: false,
actionId: 'delete',
header: 'delete',
items: [{
tooltip: 'tool'
}]
}],
flex: 1
}],
flex: 1,
initComponent: function () {
this.items[0].plugins.push(Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
}));
this.callParent(arguments);
var sto = Ext.create('Ext.data.Store', {
fields: ['label'],
data: []
});
this.down('grid').bindStore(sto);
this.down('grid').columns[0].text = 'Name';
this.down('grid').columns[0].dataIndex = 'label';
}
});
Ext.onReady(function () {
Ext.QuickTips.init();
var grid1 = Ext.create('AM.view.editpanel.CustomList', {
renderTo: Ext.getBody()
});
var grid2 = Ext.create('AM.view.editpanel.CustomList', {
renderTo: Ext.getBody()
});
});
Any help is appreciated, thank you!
Just put configs of Object or array type (in your case - items) inside initComponent: demo.
For more info see my answer here.
You can create separate objects for each grid like
//For grid 1
var rowEditing1 = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: true
});
//For grid 2
var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: true
});
It will create different instances for the different grids. Tested Working fine :)