function generateLine1(count) {
var series = []
var x = [6, 8.67, 9, 9.33, 10, 11.3]
var y = [.99, .7, .78, .65, .95, .99]
for (var i = 0; i < count; i++)
{
series.push({
x: x[i],
y: y[i],
title: `Point ${i+1}`,
comment_1: x[i],
comment_2: y[i]
})
}
return series
}
function generateLine2(count) {
var series = []
var x = [6, 8.67, 9, 9.67, 10.95, 11.3]
var y = [.99, .88, .92, .86, .96, .96]
for (var i = 0; i < count; i++)
{
series.push({
x: x[i],
y: y[i],
title: `Point ${i+1}`,
comment_1: x[i],
comment_2: y[i]
})
}
return series
}
options = ({
chart: {
height: 450,
width: 500,
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
},
markers: {
size: 5,
style: 'full',
},
stroke: {
curve: 'stepline'
},
series: series,
xaxis: {
min: 6,
max: 11.3,
type: 'integer',
tickAmount: 4
},
yaxis: {
min: 0,
max: 1,
tickAmount: 10
},
tooltip: {
enabled: true,
custom: function({_, seriesIndex, dataPointIndex, w}) {
return `<div class="arrow_box">
<h2>${series[seriesIndex].data[dataPointIndex].title}</h2>
<p>Wavelength: ${series[seriesIndex].data[dataPointIndex].comment_1} μm</p>
<p>Absorptivity: ${series[seriesIndex].data[dataPointIndex].comment_2}</p>
</div>`
}
}
})
chart = new ApexCharts.default(
document.querySelector("#chart"),
options
)
chart.render()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
