I have this chart: http://jsfiddle.net/pLDeq/10/
exporting: {
enabled: true,
exportButton: {
enabled: true
},
buttons: {
customButton: {
symbol: 'url(http://cdn1.iconfinder.com/data/icons/fatcow/16/chart_bar.png)',
onclick: function() {
setChartColumn([name,name2], categories, [data,data2], ['column','column']);
}
}
}
}
In the jsFiddle the chart exports correctly but in my project looks like this:
What could be the problem? I'm using the same scripts.
I use this as a solution and work:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
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
For this code with the bind part not commented I get the error message which I post below the code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="UTF-8" src="./ext-all-debug.js"></script>
<script type="text/javascript">
var resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'Results',
width: 600,
height: 400,
border: true,
layout: {
type: 'vbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 5
},
items: [{ // Results grid specified as a config object with an xtype of 'grid'
xtype: 'button',
text: 'button1',
pressed: false,
reference: 'button1',
listeners : {
click: { fn: function(){ alert("heheh");}}
}
},
{
xtype: 'button',
text: 'button2',
bind: {
hidden: '{!button1.pressed}',
}
}
]
});
Ext.onReady(function () {
resultsPanel.render(Ext.getBody());
}, this, {delay: 1000});
</script>
</head>
<body>
</body>
</html>
following error message:
[E] Ext.dom.Element.constructor(): Invalid domNode reference or an id of an existing domNode: null ext-all-debug.js:10375:31
extPanel.html:34
When I remove the bind part from the code then everything works fine.
In button1 you must add:
enableToggle: true,
pressed is only available for toggle buttons.
I am creating a new project in that I am using Grid.
Here is my grid.
Ext.define('myProj.view.base.grid.myGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
controller: 'myProj-controller-base-grid-myGridcontroller',
requires: [
"myProj.controller.base.grid.myGridcontroller",
'Ext.grid.feature.Grouping',
'Ext.grid.plugin.BufferedRenderer',
'Ext.grid.filters.Filters',
],
mixins: ['Deft.mixin.Injectable'],
inject: ["gridStore"],
config: {
gridStore: null,
},
emptyText : "No data available",
plugins: {
gridfilters: true
},
overflowY: 'auto',
width:'100%',
stripeRows: false,
columnLines: false,
selModel: {
selType: 'checkboxmodel',
mode: 'SINGLE',
allowDeselect: true
},
initComponent: function () {
let _this=this;
Ext.apply(this, {
store: this.getListGridStore(),
});
this.callParent(arguments);
}
});
Now I want to overideto my filter. I have writtent my override code I am looking many examples but I am not geeting how to connect these two codes. ANy help will be usefull.
The overide code which I wanted to place here look like this.
Ext.override(Ext.grid.filters.filter.List, {
createMenuItems: function (store) {
debugger;
}
});
I believe the override works but the createMenuItems function is not called.
Did you define the filter for each column? Like in the code example shown here.
{
dataIndex: 'rating',
text: 'Rating',
width: 75,
filter: {
type: 'list',
value: 5
}
}
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'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
}]
});