Your IP : 216.73.216.79
// @ts-check
/**
* 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,
logBase: 10,
tickAmount: undefined,
stepSize: undefined,
forceNiceScale: false,
max: undefined,
min: undefined,
floating: false,
decimalsInFloat: undefined,
labels: {
show: true,
showDuplicates: false,
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 = {
id: undefined,
x: 0,
y: null,
yAxisIndex: 0,
seriesIndex: undefined,
mouseEnter: undefined,
mouseLeave: undefined,
click: undefined,
marker: {
size: 4,
fillColor: '#fff',
strokeWidth: 2,
strokeColor: '#333',
shape: 'circle',
offsetX: 0,
offsetY: 0,
// radius: 2, // DEPRECATED
cssClass: '',
},
label: {
borderColor: '#c2c2c2',
borderWidth: 1,
borderRadius: 2,
text: undefined,
textAnchor: 'middle',
offsetX: 0,
offsetY: 0,
mouseEnter: undefined,
mouseLeave: undefined,
click: undefined,
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 (image)
SVG: undefined,
cssClass: undefined,
offsetX: 0,
offsetY: 0,
},
image: {
path: undefined,
width: 20,
height: 20,
offsetX: 0,
offsetY: 0,
},
}
this.yAxisAnnotation = {
id: undefined,
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,
mouseEnter: undefined,
mouseLeave: undefined,
click: undefined,
style: {
background: '#fff',
color: undefined,
fontSize: '11px',
fontFamily: undefined,
fontWeight: 400,
cssClass: '',
padding: {
left: 5,
right: 5,
top: 2,
bottom: 2,
},
},
},
}
this.xAxisAnnotation = {
id: undefined,
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,
mouseEnter: undefined,
mouseLeave: undefined,
click: undefined,
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: {
yaxis: [this.yAxisAnnotation],
xaxis: [this.xAxisAnnotation],
points: [this.pointAnnotation],
texts: [],
images: [],
shapes: [],
},
chart: {
animations: {
// Master switch — set false to render charts without any animation.
// Each chart type gets a tailored initial-mount animation by default:
// line/area/rangeArea/radar: pen-stroke draw + radial fill bloom
// bar/stacked/range/funnel: grow from baseline (+ stagger)
// scatter/bubble: scale-up pop with overshoot
// heatmap: diagonal-wave cell reveal
// treemap: largest-tile-first cascade
// pie/donut/polar/gauge: arc sweep + needle settle
// Speed is controlled by `speed`; per-element stagger by
// `animateGradually.enabled` / `animateGradually.delay`.
enabled: true,
speed: 800,
animateGradually: {
// Drives per-element stagger across all chart types. When enabled,
// bars/heatmap-cells/scatter-points/treemap-tiles reveal in
// sequence; line/area markers fade in progressively along the
// draw. `delay` is the requested step in ms (auto-capped per
// chart so total stagger ≤ ~half the animation duration).
delay: 150,
enabled: true,
},
dynamicAnimation: {
// Data-change (updateSeries) animation. Independent from the
// initial-mount animations above.
enabled: true,
speed: 350,
},
// Honor the OS-level prefers-reduced-motion setting. When true (default)
// and the user has the accessibility preference enabled, all initial-mount
// animations are skipped and the chart renders instantly.
respectReducedMotion: true,
},
background: '',
locales: [en],
defaultLocale: 'en',
dropShadow: {
enabled: false,
enabledOnSeries: undefined,
top: 2,
left: 2,
blur: 4,
color: '#000',
opacity: 0.7,
},
events: {
animationEnd: undefined,
beforeMount: undefined,
mounted: undefined,
updated: undefined,
click: undefined,
mouseMove: undefined,
mouseLeave: undefined,
xAxisLabelClick: undefined,
legendClick: undefined,
markerClick: undefined,
selection: undefined,
dataPointSelection: undefined,
dataPointMouseEnter: undefined,
dataPointMouseLeave: undefined,
beforeZoom: undefined,
beforeResetZoom: undefined,
zoomed: undefined,
scrolled: undefined,
brushScrolled: undefined,
keyDown: undefined,
keyUp: undefined,
},
foreColor: '#373d3f',
fontFamily: 'Helvetica, Arial, sans-serif',
height: 'auto',
parentHeightOffset: 15,
redrawOnParentResize: true,
redrawOnWindowResize: true,
id: undefined,
group: undefined,
nonce: undefined,
offsetX: 0,
offsetY: 0,
injectStyleSheet: true,
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,
targets: undefined,
},
stacked: false,
stackOnlyBar: true, // mixed chart with stacked bars and line series - incorrect line draw #907
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',
categoryFormatter: undefined,
valueFormatter: undefined,
},
png: {
filename: undefined,
},
svg: {
filename: undefined,
},
scale: undefined,
width: undefined,
},
autoSelected: 'zoom', // accepts -> zoom, pan, selection
},
type: 'line',
width: '100%',
zoom: {
enabled: true,
type: 'x',
autoScaleYaxis: false,
allowMouseWheelZoom: true,
zoomedArea: {
fill: {
color: '#90CAF9',
opacity: 0.4,
},
stroke: {
color: '#0D47A1',
opacity: 0.4,
width: 1,
},
},
},
accessibility: {
enabled: true,
description: undefined,
announcements: {
enabled: true,
},
keyboard: {
enabled: true,
navigation: {
enabled: true,
wrapAround: false,
},
},
},
dataReducer: {
enabled: false,
algorithm: 'lttb',
targetPoints: 250,
threshold: 500,
},
},
parsing: {
x: undefined,
y: undefined,
},
plotOptions: {
line: {
isSlopeChart: false,
colors: {
threshold: 0,
colorAboveThreshold: undefined,
colorBelowThreshold: undefined,
},
},
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,
borderRadiusApplication: 'around', // [around, end]
borderRadiusWhenStacked: 'last', // [all, last]
rangeBarOverlap: true,
rangeBarGroupRows: false,
hideZeroBarsWhenGrouped: false,
isDumbbell: false,
dumbbellColors: undefined,
isFunnel: false,
isFunnel3d: true,
colors: {
ranges: [],
backgroundBarColors: [],
backgroundBarOpacity: 1,
backgroundBarRadius: 0,
},
dataLabels: {
position: 'top', // top, center, bottom
maxItems: 100,
hideOverflowingLabels: true,
orientation: 'horizontal',
total: {
enabled: false,
formatter: undefined,
offsetX: 0,
offsetY: 0,
style: {
color: '#373d3f',
fontSize: '12px',
fontFamily: undefined,
fontWeight: 600,
},
},
},
},
bubble: {
zScaling: true,
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,
},
},
funnel: {
// 'rectangle' preserves the existing centered-rectangle funnel
// geometry. 'trapezoid' produces continuous sloped sides between
// consecutive stages (each stage's bottom width matches the next
// stage's top width).
shape: 'rectangle',
// For shape: 'trapezoid' only — what to do with the last stage's
// bottom edge: 'flat' (parallel sides) or 'taper' (taper to a point).
lastShape: 'flat',
},
treemap: {
enableShades: true,
shadeIntensity: 0.5,
distributed: false,
reverseNegativeShade: false,
useFillColorAsStroke: false,
borderRadius: 4,
dataLabels: {
format: 'scale', // scale | truncate
},
colorScale: {
inverse: false,
ranges: [],
min: undefined,
max: undefined,
},
seriesTitle: {
show: true,
offsetY: 1,
offsetX: 1,
borderColor: '#000',
borderWidth: 1,
borderRadius: 2,
style: {
background: 'rgba(0, 0, 0, 0.6)',
color: '#fff',
fontSize: '12px',
fontFamily: undefined,
fontWeight: 400,
cssClass: '',
padding: {
left: 6,
right: 6,
top: 2,
bottom: 2,
},
},
},
},
radialBar: {
inverseOrder: false,
startAngle: 0,
endAngle: 360,
offsetX: 0,
offsetY: 0,
// Gauge sub-shape. 'arc' (default) renders the existing filled
// value-arc gauge; 'needle' replaces the value-arc with a rotating
// pointer/needle. Bands and ticks are independent and work for both
// shapes.
shape: 'arc',
// Value-to-angle mapping. Defaults to the existing 0..100 range
// used by radialBar. Override for gauges that need a custom domain
// (e.g. min: 0, max: 240 for a speedometer).
min: 0,
max: 100,
// Threshold bands rendered as colored arc segments along the gauge
// arc (e.g. [{from:0,to:30,color:'#FF4560'}, ...]). Bands draw
// behind the value-arc and tick marks. Set to [] (default) to
// disable.
bands: [],
bandsStyle: {
// % of arc radius. Slightly less than the value-arc stroke so
// the value-arc reads on top by default.
strokeWidth: '40%',
// px gap between consecutive bands.
gap: 0,
// Hide the track when bands cover the full range; the bands
// themselves act as the visual backdrop.
hideTrackWhenPresent: true,
},
// Tick marks rendered along (outside) the gauge arc.
ticks: {
show: false,
major: {
count: 11,
length: 10,
width: 2,
color: '#666',
// 'inside' draws ticks from `radius - length` to `radius`;
// 'outside' draws from `radius` to `radius + length`.
placement: 'outside',
},
minor: {
count: 4, // minor ticks BETWEEN each pair of major ticks
length: 5,
width: 1,
color: '#999',
placement: 'outside',
},
labels: {
show: false,
offset: 6,
fontSize: '11px',
fontFamily: undefined,
fontWeight: 400,
color: '#666',
/** @param {number} v */
formatter(v) {
return String(v)
},
},
},
// Needle/dial configuration. Only applies when `shape: 'needle'`.
needle: {
color: '#333',
// px radius of the pivot circle at chart center.
baseRadius: 8,
// Needle length as a % of the gauge radius (string like '85%')
// or as an absolute px number.
length: '85%',
// px width of the needle line at the base.
baseWidth: 4,
// px width of the needle tip (tapered if smaller than baseWidth).
tipWidth: 1,
animation: {
enabled: true,
duration: 800,
easing: 'ease-out',
},
},
pivot: {
show: true,
color: '#333',
strokeColor: '#fff',
strokeWidth: 2,
},
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,
/**
* @param {any} val
*/
formatter(val) {
return val
},
},
value: {
show: true,
fontSize: '14px',
fontFamily: undefined,
fontWeight: 400,
color: undefined,
offsetY: 16,
/**
* @param {any} val
*/
formatter(val) {
return val + '%'
},
},
total: {
show: false,
label: 'Total',
fontSize: '16px',
fontWeight: 600,
fontFamily: undefined,
color: undefined,
/**
* @param {import('../../types/internal').ChartStateW} w
*/
formatter(w) {
return (
/**
* @param {number} a
* @param {number} b
*/
w.globals.seriesTotals.reduce((a, b) => a + b, 0) /
w.seriesData.series.length +
'%'
)
},
},
},
barLabels: {
enabled: false,
offsetX: 0,
offsetY: 0,
useSeriesColors: true,
fontFamily: undefined,
fontWeight: 600,
fontSize: '16px',
/**
* @param {any} val
*/
formatter(val) {
return val
},
onClick: undefined,
},
},
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,
/**
* @param {any} val
*/
formatter(val) {
return val
},
},
value: {
show: true,
fontSize: '20px',
fontFamily: undefined,
fontWeight: 400,
color: undefined,
offsetY: 10,
/**
* @param {any} val
*/
formatter(val) {
return val
},
},
total: {
show: false,
showAlways: false,
label: 'Total',
fontSize: '16px',
fontWeight: 400,
fontFamily: undefined,
color: undefined,
/**
* @param {import('../../types/internal').ChartStateW} w
*/
formatter(w) {
/**
* @param {number} a
* @param {number} b
*/
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,
/**
* @param {any} val
*/
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',
backgroundColor: undefined,
borderRadius: 2,
padding: 4,
opacity: 0.9,
borderWidth: 1,
borderColor: '#fff',
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.8,
},
},
dropShadow: {
enabled: false,
top: 1,
left: 1,
blur: 1,
color: '#000',
opacity: 0.8,
},
},
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: [],
clusterGroupedSeries: true,
clusterGroupedSeriesOrientation: 'vertical',
labels: {
colors: undefined,
useSeriesColors: false,
},
markers: {
size: 7,
fillColors: undefined,
strokeWidth: 1,
shape: undefined,
offsetX: 0,
offsetY: 0,
customHTML: undefined,
onClick: undefined,
},
itemMargin: {
horizontal: 5,
vertical: 4,
},
onItemClick: {
toggleDataSeries: true,
},
onItemHover: {
highlightDataSeries: true,
},
},
markers: {
discrete: [],
size: 0,
colors: undefined,
strokeColors: '#fff',
strokeWidth: 2,
strokeOpacity: 0.9,
strokeDashArray: 0,
fillOpacity: 1,
shape: 'circle',
offsetX: 0,
offsetY: 0,
showNullDataPoints: true,
onClick: undefined,
onDblClick: undefined,
hover: {
size: undefined,
sizeOffset: 3,
},
},
noData: {
text: undefined,
align: 'center',
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: {
hover: {
filter: {
type: 'lighten',
},
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'darken',
},
},
},
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" / "monotoneCubic" / "stepline" / "linestep"
lineCap: 'butt', // round, butt , square
width: 2,
colors: undefined, // array of colors
dashArray: 0, // single value or array of values
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: [],
},
},
},
tooltip: {
enabled: true,
enabledOnSeries: undefined,
shared: true,
hideEmptySeries: false,
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',
cssClass: '',
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: {
/**
* @param {string} seriesName
*/
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: {
// Base format per interval unit. TimeScale.formatDates folds in
// coarser context automatically when the data range spans it
// (e.g. month-scale across years → 'MMM yyyy', hour-scale across
// days → 'dd MMM HH:mm'). Customizing a base format that already
// includes the higher-unit token disables the auto-expansion for
// that level.
year: 'yyyy',
month: 'MMM',
day: 'dd MMM',
hour: 'HH:mm',
minute: 'HH:mm',
second: 'HH:mm:ss',
},
},
group: {
groups: [],
style: {
colors: [],
fontSize: '12px',
fontWeight: 400,
fontFamily: undefined,
cssClass: '',
},
},
axisBorder: {
show: true,
color: '#e0e0e0',
width: '100%',
height: 1,
offsetX: 0,
offsetY: 0,
},
axisTicks: {
show: true,
color: '#e0e0e0',
height: 6,
offsetX: 0,
offsetY: 0,
},
stepSize: undefined,
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.8,
},
},
tooltip: {
enabled: true,
offsetY: 0,
formatter: undefined,
style: {
fontSize: '12px',
fontFamily: undefined,
},
},
},
yaxis: this.yAxis,
theme: {
mode: '',
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,
},
accessibility: {
colorBlindMode: '', // '' | 'deuteranopia' | 'protanopia' | 'tritanopia' | 'highContrast'
},
},
}
}
}