Line graph
d3 = require ('d3')
series= [{
name: "1",
data: s_1
},/* {
name: "Mobiles",
data: generateDayWiseTimeSeries(new Date('1 Jan 2010').getTime(), 20, { min: 0, max: 10 })
}*/]
options = ({
chart: {
type: 'line',
toolbar: {
show: false,
tools: {
download: false,
selection: false,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: false
}
}
},
dataLabels: {
enabled: false
},
legend: {
show: interactive
},
markers: {
size: 6,
style: 'full',
},
stroke: {
curve: 'smooth'
},
series: series,
xaxis: {
tickAmount:10
//type: 'int'
},
yaxis: {
min: 0,
max: 1,
tickAmount: 10
},
tooltip: {
enabled: interactive,
custom: function({_, seriesIndex, dataPointIndex, w}) {
return `<div class="arrow_box">
<h2>${series[seriesIndex].data[dataPointIndex].title}</h2>
<p>${series[seriesIndex].data[dataPointIndex].comment}</p>
<p>Level: ${series[seriesIndex].data[dataPointIndex].level}</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.
