options_2 = ({
chart: {
height: 400,
width: 900,
toolbar: {
show: true,
offsetX: 0,
offsetY: 0,
tools: {
download: true,
selection: true,
zoom: false,
zoomin: true,
zoomout: true,
pan: true,
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
},
autoSelected: 'zoom'
},
},
dataLabels: {
enabled: false
},
legend: {
show: true
},
colors: ['#D9EB4B', '#535EEB', '#00218A', '#F21A1D', '#FF822E', '#FF2079'],
markers: {
size: 5,
style: 'full',
},
stroke: {
curve: 'straight'
},
series: series_2,
annotations: {
xaxis: [
{
x: .4,
x2: .7,
fillColor: '#9370DB',
label: {
text: 'Visible spectrum'
}
}
] },
xaxis: {
min: 0,
max: 20,
type: 'integer',
tickAmount: 8,
title: {
text: "Wavelength (in μm)",
offsetX: -5,
offsetY: 0,
style: {
color: "#222222",
fontSize: '15px',
fontFamily: 'Helvetica',
fontWeight: 600,
cssClass: 'apexcharts-yaxis-title',
},
},
yaxis: {
min: 0,
max: 1,
tickAmount: 10,
title: {
text: "Emissivity",
offsetX: -5,
offsetY: 0,
style: {
color: "#222222",
fontSize: '15px',
fontFamily: 'Helvetica',
fontWeight: 600,
cssClass: 'apexcharts-yaxis-title',
},
},
tooltip: {
enabled: true,
custom: function({_, seriesIndex, dataPointIndex, w}) {
return `<div class="arrow_box">
<h2>${series_2[seriesIndex].data[dataPointIndex].title}</h2>
<p>Wavelength: ${series_2[seriesIndex].data[dataPointIndex].comment_1} μm</p>
<p>Emissivity: ${series_2[seriesIndex].data[dataPointIndex].comment_2}</p>
</div>`
}
}
})