| Current File : /home/tradevaly/www/node_modules/apexcharts/src/modules/settings/Options.js |
/**
* ApexCharts Options for setting the initial configuration of ApexCharts
**/
import en from './../../locales/en.json'
export default class Options {
constructor() {
this.yAxis = {
show: true,
showAlways: false,
showForNullSeries: true,
seriesName: undefined,
opposite: false,
reversed: false,
logarithmic: false,
tickAmount: undefined,
forceNiceScale: false,
max: undefined,
min: undefined,
floating: false,
decimalsInFloat: undefined,
labels: {
show: true,
minWidth: 0,
maxWidth: 160,
offsetX: 0,
offsetY: 0,
align: undefined,
rotate: 0,
padding: 20,
style: {
colors: [],
fontSize: '11px',
fontWeight: 400,
fontFamily: undefined,
cssClass: ''
},
formatter: undefined
},
axisBorder: {
show: false,
color: '#e0e0e0',
width: 1,
offsetX: 0,
offsetY: 0
},
axisTicks: {
show: false,
color: '#e0e0e0',
width: 6,
offsetX: 0,
offsetY: 0
},
title: {
text: undefined,
rotate: -90,
offsetY: 0,
offsetX: 0,
style: {
color: undefined,
fontSize: '11px',
fontWeight: 900,
fontFamily: undefined,
cssClass: ''
}
},
tooltip: {
enabled: false,
offsetX: 0
},
crosshairs: {
show: true,
position: 'front',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0
}
}
}
this.pointAnnotation = {
x: 0,
y: null,
yAxisIndex: 0,
seriesIndex: 0,
marker: {
size: 4,
fillColor: '#fff',
strokeWidth: 2,
strokeColor: '#333',
shape: 'circle',
offsetX: 0,
offsetY: 0,
radius: 2,
cssClass: ''
},
label: {
borderColor: '#c2c2c2',
borderWidth: 1,
borderRadius: 2,
text: undefined,
textAnchor: 'middle',
offsetX: 0,
offsetY: 0,
style: {
background: '#fff',
color: undefined,
fontSize: '11px',
fontFamily: undefined,
fontWeight: 400,
cssClass: '',
padding: {
left: 5,
right: 5,
top: 2,
bottom: 2
}
}
},
customSVG: {
// this will be deprecated in the next major version as it is going to be replaced with a better alternative below
SVG: undefined,
cssClass: undefined,
offsetX: 0,
offsetY: 0
},
image: {
path: undefined,
width: 20,
height: 20,
offsetX: 0,
offsetY: 0
}
}
this.yAxisAnnotation = {
y: 0,
y2: null,
strokeDashArray: 1,
fillColor: '#c2c2c2',
borderColor: '#c2c2c2',
borderWidth: 1,
opacity: 0.3,
offsetX: 0,
offsetY: 0,
width: '100%',
yAxisIndex: 0,
label: {
borderColor: '#c2c2c2',
borderWidth: 1,
borderRadius: 2,
text: undefined,
textAnchor: 'end',
position: 'right',
offsetX: 0,
offsetY: -3,
style: {
background: '#fff',
color: undefined,
fontSize: '11px',
fontFamily: undefined,
fontWeight: 400,
cssClass: '',
padding: {
left: 5,
right: 5,
top: 2,
bottom: 2
}
}
}
}
this.xAxisAnnotation = {
x: 0,
x2: null,
strokeDashArray: 1,
fillColor: '#c2c2c2',
borderColor: '#c2c2c2',
borderWidth: 1,
opacity: 0.3,
offsetX: 0,
offsetY: 0,
label: {
borderColor: '#c2c2c2',
borderWidth: 1,
borderRadius: 2,
text: undefined,
textAnchor: 'middle',
orientation: 'vertical',
position: 'top',
offsetX: 0,
offsetY: 0,
style: {
background: '#fff',
color: undefined,
fontSize: '11px',
fontFamily: undefined,
fontWeight: 400,
cssClass: '',
padding: {
left: 5,
right: 5,
top: 2,
bottom: 2
}
}
}
}
this.text = {
x: 0,
y: 0,
text: '',
textAnchor: 'start',
foreColor: undefined,
fontSize: '13px',
fontFamily: undefined,
fontWeight: 400,
appendTo: '.apexcharts-annotations',
backgroundColor: 'transparent',
borderColor: '#c2c2c2',
borderRadius: 0,
borderWidth: 0,
paddingLeft: 4,
paddingRight: 4,
paddingTop: 2,
paddingBottom: 2
}
}
init() {
return {
annotations: {
position: 'front',
yaxis: [this.yAxisAnnotation],
xaxis: [this.xAxisAnnotation],
points: [this.pointAnnotation],
texts: [],
images: [],
shapes: []
},
chart: {
animations: {
enabled: true,
easing: 'easeinout', // linear, easeout, easein, easeinout, swing, bounce, elastic
speed: 800,
animateGradually: {
delay: 150,
enabled: true
},
dynamicAnimation: {
enabled: true,
speed: 350
}
},
background: 'transparent',
locales: [en],
defaultLocale: 'en',
dropShadow: {
enabled: false,
enabledOnSeries: undefined,
top: 2,
left: 2,
blur: 4,
color: '#000',
opacity: 0.35
},
events: {
animationEnd: undefined,
beforeMount: undefined,
mounted: undefined,
updated: undefined,
click: undefined,
mouseMove: undefined,
mouseLeave: undefined,
legendClick: undefined,
markerClick: undefined,
selection: undefined,
dataPointSelection: undefined,
dataPointMouseEnter: undefined,
dataPointMouseLeave: undefined,
beforeZoom: undefined,
beforeResetZoom: undefined,
zoomed: undefined,
scrolled: undefined,
brushScrolled: undefined
},
foreColor: '#373d3f',
fontFamily: 'Helvetica, Arial, sans-serif',
height: 'auto',
parentHeightOffset: 15,
redrawOnParentResize: true,
redrawOnWindowResize: true,
id: undefined,
group: undefined,
offsetX: 0,
offsetY: 0,
selection: {
enabled: false,
type: 'x',
// selectedPoints: undefined, // default datapoints that should be selected automatically
fill: {
color: '#24292e',
opacity: 0.1
},
stroke: {
width: 1,
color: '#24292e',
opacity: 0.4,
dashArray: 3
},
xaxis: {
min: undefined,
max: undefined
},
yaxis: {
min: undefined,
max: undefined
}
},
sparkline: {
enabled: false
},
brush: {
enabled: false,
autoScaleYaxis: true,
target: undefined
},
stacked: false,
stackType: 'normal',
toolbar: {
show: true,
offsetX: 0,
offsetY: 0,
tools: {
download: true,
selection: true,
zoom: true,
zoomin: true,
zoomout: true,
pan: true,
reset: true,
customIcons: []
},
export: {
csv: {
filename: undefined,
columnDelimiter: ',',
headerCategory: 'category',
headerValue: 'value',
dateFormatter(timestamp) {
return new Date(timestamp).toDateString()
}
},
png: {
filename: undefined
},
svg: {
filename: undefined
}
},
autoSelected: 'zoom' // accepts -> zoom, pan, selection
},
type: 'line',
width: '100%',
zoom: {
enabled: true,
type: 'x',
autoScaleYaxis: false,
zoomedArea: {
fill: {
color: '#90CAF9',
opacity: 0.4
},
stroke: {
color: '#0D47A1',
opacity: 0.4,
width: 1
}
}
}
},
plotOptions: {
area: {
fillTo: 'origin'
},
bar: {
horizontal: false,
columnWidth: '70%', // should be in percent 0 - 100
barHeight: '70%', // should be in percent 0 - 100
distributed: false,
borderRadius: 0,
rangeBarOverlap: true,
rangeBarGroupRows: false,
colors: {
ranges: [],
backgroundBarColors: [],
backgroundBarOpacity: 1,
backgroundBarRadius: 0
},
dataLabels: {
position: 'top', // top, center, bottom
maxItems: 100,
hideOverflowingLabels: true,
orientation: 'horizontal'
// TODO: provide stackedLabels for stacked charts which gives additions of values
}
},
bubble: {
minBubbleRadius: undefined,
maxBubbleRadius: undefined
},
candlestick: {
colors: {
upward: '#00B746',
downward: '#EF403C'
},
wick: {
useFillColor: true
}
},
boxPlot: {
colors: {
upper: '#00E396',
lower: '#008FFB'
}
},
heatmap: {
radius: 2,
enableShades: true,
shadeIntensity: 0.5,
reverseNegativeShade: false,
distributed: false,
useFillColorAsStroke: false,
colorScale: {
inverse: false,
ranges: [],
min: undefined,
max: undefined
}
},
treemap: {
enableShades: true,
shadeIntensity: 0.5,
distributed: false,
reverseNegativeShade: false,
useFillColorAsStroke: false,
colorScale: {
inverse: false,
ranges: [],
min: undefined,
max: undefined
}
},
radialBar: {
inverseOrder: false,
startAngle: 0,
endAngle: 360,
offsetX: 0,
offsetY: 0,
hollow: {
margin: 5,
size: '50%',
background: 'transparent',
image: undefined,
imageWidth: 150,
imageHeight: 150,
imageOffsetX: 0,
imageOffsetY: 0,
imageClipped: true,
position: 'front',
dropShadow: {
enabled: false,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.5
}
},
track: {
show: true,
startAngle: undefined,
endAngle: undefined,
background: '#f2f2f2',
strokeWidth: '97%',
opacity: 1,
margin: 5, // margin is in pixels
dropShadow: {
enabled: false,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.5
}
},
dataLabels: {
show: true,
name: {
show: true,
fontSize: '16px',
fontFamily: undefined,
fontWeight: 600,
color: undefined,
offsetY: 0,
formatter(val) {
return val
}
},
value: {
show: true,
fontSize: '14px',
fontFamily: undefined,
fontWeight: 400,
color: undefined,
offsetY: 16,
formatter(val) {
return val + '%'
}
},
total: {
show: false,
label: 'Total',
fontSize: '16px',
fontWeight: 600,
fontFamily: undefined,
color: undefined,
formatter(w) {
return (
w.globals.seriesTotals.reduce((a, b) => a + b, 0) /
w.globals.series.length +
'%'
)
}
}
}
},
pie: {
customScale: 1,
offsetX: 0,
offsetY: 0,
startAngle: 0,
endAngle: 360,
expandOnClick: true,
dataLabels: {
// These are the percentage values which are displayed on slice
offset: 0, // offset by which labels will move outside
minAngleToShowLabel: 10
},
donut: {
size: '65%',
background: 'transparent',
labels: {
// These are the inner labels appearing inside donut
show: false,
name: {
show: true,
fontSize: '16px',
fontFamily: undefined,
fontWeight: 600,
color: undefined,
offsetY: -10,
formatter(val) {
return val
}
},
value: {
show: true,
fontSize: '20px',
fontFamily: undefined,
fontWeight: 400,
color: undefined,
offsetY: 10,
formatter(val) {
return val
}
},
total: {
show: false,
showAlways: false,
label: 'Total',
fontSize: '16px',
fontWeight: 400,
fontFamily: undefined,
color: undefined,
formatter(w) {
return w.globals.seriesTotals.reduce((a, b) => a + b, 0)
}
}
}
}
},
polarArea: {
rings: {
strokeWidth: 1,
strokeColor: '#e8e8e8'
},
spokes: {
strokeWidth: 1,
connectorColors: '#e8e8e8'
}
},
radar: {
size: undefined,
offsetX: 0,
offsetY: 0,
polygons: {
// strokeColor: '#e8e8e8', // should be deprecated in the minor version i.e 3.2
strokeWidth: 1,
strokeColors: '#e8e8e8',
connectorColors: '#e8e8e8',
fill: {
colors: undefined
}
}
}
},
colors: undefined,
dataLabels: {
enabled: true,
enabledOnSeries: undefined,
formatter(val) {
return val !== null ? val : ''
},
textAnchor: 'middle',
distributed: false,
offsetX: 0,
offsetY: 0,
style: {
fontSize: '12px',
fontFamily: undefined,
fontWeight: 600,
colors: undefined
},
background: {
enabled: true,
foreColor: '#fff',
borderRadius: 2,
padding: 4,
opacity: 0.9,
borderWidth: 1,
borderColor: '#fff',
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.45
}
},
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.45
}
},
fill: {
type: 'solid',
colors: undefined, // array of colors
opacity: 0.85,
gradient: {
shade: 'dark',
type: 'horizontal',
shadeIntensity: 0.5,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 100],
colorStops: []
},
image: {
src: [],
width: undefined, // optional
height: undefined // optional
},
pattern: {
style: 'squares', // String | Array of Strings
width: 6,
height: 6,
strokeWidth: 2
}
},
forecastDataPoints: {
count: 0,
fillOpacity: 0.5,
strokeWidth: undefined,
dashArray: 4
},
grid: {
show: true,
borderColor: '#e0e0e0',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined, // takes as array which will be repeated on rows
opacity: 0.5
},
column: {
colors: undefined, // takes an array which will be repeated on columns
opacity: 0.5
},
padding: {
top: 0,
right: 10,
bottom: 0,
left: 12
}
},
labels: [],
legend: {
show: true,
showForSingleSeries: false,
showForNullSeries: true,
showForZeroSeries: true,
floating: false,
position: 'bottom', // whether to position legends in 1 of 4
// direction - top, bottom, left, right
horizontalAlign: 'center', // when position top/bottom, you can specify whether to align legends left, right or center
inverseOrder: false,
fontSize: '12px',
fontFamily: undefined,
fontWeight: 400,
width: undefined,
height: undefined,
formatter: undefined,
tooltipHoverFormatter: undefined,
offsetX: -20,
offsetY: 4,
customLegendItems: [],
labels: {
colors: undefined,
useSeriesColors: false
},
markers: {
width: 12,
height: 12,
strokeWidth: 0,
fillColors: undefined,
strokeColor: '#fff',
radius: 12,
customHTML: undefined,
offsetX: 0,
offsetY: 0,
onClick: undefined
},
itemMargin: {
horizontal: 5,
vertical: 2
},
onItemClick: {
toggleDataSeries: true
},
onItemHover: {
highlightDataSeries: true
}
},
markers: {
discrete: [],
size: 0,
colors: undefined,
//strokeColor: '#fff', // TODO: deprecate in major version 4.0
strokeColors: '#fff',
strokeWidth: 2,
strokeOpacity: 0.9,
strokeDashArray: 0,
fillOpacity: 1,
shape: 'circle',
width: 8, // only applicable when shape is rect/square
height: 8, // only applicable when shape is rect/square
radius: 2,
offsetX: 0,
offsetY: 0,
onClick: undefined,
onDblClick: undefined,
showNullDataPoints: true,
hover: {
size: undefined,
sizeOffset: 3
}
},
noData: {
text: undefined,
align: 'center',
verticalAlign: 'middle',
offsetX: 0,
offsetY: 0,
style: {
color: undefined,
fontSize: '14px',
fontFamily: undefined
}
},
responsive: [], // breakpoints should follow ascending order 400, then 700, then 1000
series: undefined,
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'lighten',
value: 0.1
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'darken',
value: 0.5
}
}
},
title: {
text: undefined,
align: 'left',
margin: 5,
offsetX: 0,
offsetY: 0,
floating: false,
style: {
fontSize: '14px',
fontWeight: 900,
fontFamily: undefined,
color: undefined
}
},
subtitle: {
text: undefined,
align: 'left',
margin: 5,
offsetX: 0,
offsetY: 30,
floating: false,
style: {
fontSize: '12px',
fontWeight: 400,
fontFamily: undefined,
color: undefined
}
},
stroke: {
show: true,
curve: 'smooth', // "smooth" / "straight" / "stepline"
lineCap: 'butt', // round, butt , square
width: 2,
colors: undefined, // array of colors
dashArray: 0 // single value or array of values
},
tooltip: {
enabled: true,
enabledOnSeries: undefined,
shared: true,
followCursor: false, // when disabled, the tooltip will show on top of the series instead of mouse position
intersect: false, // when enabled, tooltip will only show when user directly hovers over point
inverseOrder: false,
custom: undefined,
fillSeriesColor: false,
theme: 'light',
style: {
fontSize: '12px',
fontFamily: undefined
},
onDatasetHover: {
highlightDataSeries: false
},
x: {
// x value
show: true,
format: 'dd MMM', // dd/MM, dd MMM yy, dd MMM yyyy
formatter: undefined // a custom user supplied formatter function
},
y: {
formatter: undefined,
title: {
formatter(seriesName) {
return seriesName ? seriesName + ': ' : ''
}
}
},
z: {
formatter: undefined,
title: 'Size: '
},
marker: {
show: true,
fillColors: undefined
},
items: {
display: 'flex'
},
fixed: {
enabled: false,
position: 'topRight', // topRight, topLeft, bottomRight, bottomLeft
offsetX: 0,
offsetY: 0
}
},
xaxis: {
type: 'category',
categories: [],
convertedCatToNumeric: false, // internal property which should not be altered outside
offsetX: 0,
offsetY: 0,
overwriteCategories: undefined,
labels: {
show: true,
rotate: -45,
rotateAlways: false,
hideOverlappingLabels: true,
trim: false,
minHeight: undefined,
maxHeight: 120,
showDuplicates: true,
style: {
colors: [],
fontSize: '12px',
fontWeight: 400,
fontFamily: undefined,
cssClass: ''
},
offsetX: 0,
offsetY: 0,
format: undefined,
formatter: undefined, // custom formatter function which will override format
datetimeUTC: true,
datetimeFormatter: {
year: 'yyyy',
month: "MMM 'yy",
day: 'dd MMM',
hour: 'HH:mm',
minute: 'HH:mm:ss',
second: 'HH:mm:ss'
}
},
axisBorder: {
show: true,
color: '#e0e0e0',
width: '100%',
height: 1,
offsetX: 0,
offsetY: 0
},
axisTicks: {
show: true,
color: '#e0e0e0',
height: 6,
offsetX: 0,
offsetY: 0
},
tickAmount: undefined,
tickPlacement: 'on',
min: undefined,
max: undefined,
range: undefined,
floating: false,
decimalsInFloat: undefined,
position: 'bottom',
title: {
text: undefined,
offsetX: 0,
offsetY: 0,
style: {
color: undefined,
fontSize: '12px',
fontWeight: 900,
fontFamily: undefined,
cssClass: ''
}
},
crosshairs: {
show: true,
width: 1, // tickWidth/barWidth or an integer
position: 'back',
opacity: 0.9,
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 3
},
fill: {
type: 'solid', // solid, gradient
color: '#B1B9C4',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5
}
},
dropShadow: {
enabled: false,
left: 0,
top: 0,
blur: 1,
opacity: 0.4
}
},
tooltip: {
enabled: true,
offsetY: 0,
formatter: undefined,
style: {
fontSize: '12px',
fontFamily: undefined
}
}
},
yaxis: this.yAxis,
theme: {
mode: 'light',
palette: 'palette1', // If defined, it will overwrite globals.colors variable
monochrome: {
// monochrome allows you to select just 1 color and fill out the rest with light/dark shade (intensity can be selected)
enabled: false,
color: '#008FFB',
shadeTo: 'light',
shadeIntensity: 0.65
}
}
}
}
}