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
Related
Could I ask you how to change default font size in react draft wysiwyg https://github.com/jpuri/react-draft-wysiwyg#readme? Class defining toolbar:
export const toolbar = {
options: ['inline', 'textAlign', 'list', 'link', 'fontSize', 'colorPicker', 'emoji'],
inline: {
inDropdown: false,
className: undefined,
component: undefined,
dropdownClassName: undefined,
options: ['bold', 'italic'],
},
list: {
inDropdown: false,
className: undefined,
component: undefined,
dropdownClassName: undefined,
options: ['unordered'],
},
textAlign: {
inDropdown: false,
className: undefined,
component: undefined,
dropdownClassName: undefined,
options: ['left', 'center', 'right']
},
link: {
inDropdown: false,
className: undefined,
component: undefined,
popupClassName: undefined,
dropdownClassName: undefined,
showOpenOptionOnHover: true,
defaultTargetOption: '_self',
options: ['link'],
linkCallback: undefined
},
fontSize: {
options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],
className: undefined,
component: undefined,
dropdownClassName: undefined,
},
colorPicker: {
className: undefined,
component: undefined,
popupClassName: undefined,
},
emoji: {
inDropdown: true,
className: undefined,
component: undefined,
popupClassName: undefined,
},
}
Font size 14 is defautl now. I don't know why. I searched for 14 in all the sourcecode and I didn't found it anyhere. When option 14 is not present in list no font size is defaultly selected. Wanted is to preselect option font size = 24. Thanks for reply.
I had same question and struggled with it even a woking day!
It's a pity that there is no oficial solution in documentation...
Found 2 solutions:
Simple (but not flexible):
just add this css code
.DraftEditor-root {
font-size: 24px;
}
This would apply size=24px to all the react-draft-wysiwyg items on the page/
Found this in library source code:
https://github.com/jpuri/react-draft-wysiwyg/blob/f59ee8419cdbd45aab3bdfdf1995f112b09bbb6a/src/controls/FontSize/Component/index.js#L30
Complex, but more flexible:
Firstli, import util functions (react-draft-wysiwyg uses this library itself)
import {
toggleCustomInlineStyle, getSelectionCustomInlineStyle,
} from 'draftjs-utils';
Secondly, on each render(!?)
you should execute:
const fontSize = getSelectionCustomInlineStyle(editorState, ['FONTSIZE',]).FONTSIZE
if (!fontSize) {
setEditorState(toggleCustomInlineStyle(editorState, 'fontSize', 24))
}
Why on each render and not on creating EditorState?
I don't know.
But this custom style is reset to empty (so - to default) when focus editor, so I have to force it each time.
I hope first solution would be enought for me and for you, because second looks like workaround and bad practice!
I have a chart component, and my job is to make a button to change it's type (eg. columns to pie), but i don't know how to change it on a button click event. Here's the structure of the component (the idea is to change the :series-defaults-type when the button with ChangeType id is pressed)
<template>
<div style="width: 100%;overflow: overlay;border-radius: 20px;">
<button id="changeType" #click="changeType()">Change</button>
<chart-more-option :kpiName="'EquipmentRetirementForecast'" v-if="showMoreOptions"/>
<chart :title-text="'Equipment Retirement Forecast'"
:title-color="'#FFF'"
:title-font="'openSans'"
:chart-area-background="'#1B1534'"
:legend-visible="false"
:series-defaults-type= "'column'"
:series="series"
:category-axis="categoryAxis"
:axis-defaults-color="'#FFF'"
:axis-defaults-labels-rotation-angle="'30'"
:value-axis="valueAxis"
:tooltip="tooltip"
:theme="'sass'"
:zoomable-mousewheel="true">
</chart>
</div>
</template>
<script>
import { Chart } from '#progress/kendo-charts-vue-wrapper';
import ChartMoreOption from '../ChartMoreOption';
export default {
name: 'EquipmentRetirementForecast',
components: {
'chart': Chart,
ChartMoreOption
},
props: {
fetchData: {
type: Boolean,
default: false
},
showMoreOptions: {
type: Boolean,
default: true,
},
},
watch: {
labelAlign(){
var c = this.$refs.chart
c.updateWidget();
}
},
computed:{
requestBody(){
return this.$store.getters['usersession/getTopologyRequestBody']
},
series(){
return this.$store.getters['riskmanagement/getRetirementForecastSeries']
},
categoryAxis(){
return this.$store.getters['riskmanagement/getRetirementForecastCategoryAxis']
},
},
data: function() {
return {
valueAxis: [{
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
}
}],
tooltip: {
visible: true,
template: "#= series.name #: #= value #",
},
}
},
mounted(){
if(this.fetchData){
this.$store.dispatch("riskmanagement/FetchRetirementForecastData",this.requestBody).then(()=>{
});
}
},
methods: {
changeType(){
//code goes here
}
}
}
</script>
<style src="../style-dashboard.scss" lang="scss" scoped />
This is the chart i need to change:
Changing the :series-defaults-type to pie by hand, it works, but i need to make that change in a button click, as follows:
Add a data property and give it the default of 'column', name it for example chartType. Then inside the changeType() you add this.chartType = 'pie'. And change :series-defaults-type= "'column'" to :series-defaults-type= "chartType".
Also remember to NOT use : for attribute values that are hardcoded. So :chart-area-background="'#1B1534'" should be chart-area-background="#1B1534".
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" />
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
}]
});