We Keep Coding

ECharts: Emphasize marker in tooltip while hovering on a line

I use Echart v5.4, and want to emphasize tooltip marker with border like https://tensorboard.dev/experiment/QFRIzZJpTZCNRzi8N7zomA/#scalars
When line chart is hovered, I want to have border around the marker.
I edited the formatter in tooltip option, but it didnt work well.
Is there any good way to make it work?
option = {
tooltip: {
trigger: 'axis',
formatter: (params) => {
let tooltip = `<p>${params[0].marker} ${params[0].seriesName}</p>`
tooltip += `<p>${params[1].marker} ${params[1].seriesName}</p>`
return tooltip
}
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};

Reading data from .csv file in javascript

Title is self explanatory. I have no experience in JavaScript but I need to use it for this project...I am utilizing eCharts to display the data in a graph.
CSV Data (About 2000 more lines like this):
Collection Name,Rank,Volume,Change in the last 24h,Change in the last 7 days,Floor
Price,Owners,Amount of items
The Degenaissance,50,77.96,+414.26%,+202.70%,1.44,2.3K,2.5K
I can also take out the name of the categories if necessary (like I said, I have no idea how this works).
JS-Code that I could come up with until now (pretty much just copy-pasted from echarts):
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [600, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
The data from the .csv should end up in series[]. Is there like a function that I can use to directly pull the data from line... and input it to the variable... ect.? Or what would be a good approach to this? Thank you so much in advance!

Placing a bubble chart on top of a stacked area chart causing missing tooltip/label and unwanted color inheritance

The intention is to create something called a 'fever chart'.
I have successfully displayed both charts, however, the bubble chart points are inheriting the color of each areaStyle attribute of the line series that it appears in and also preventing the tooltip and label for the bubble chart points from appearing.
To see what I mean please visit https://echarts.apache.org/examples/en/editor.html?c=area-stack and replace the option object with the following:
grid: {
left: '10%'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.data.length === 4) {
return `Project: ${params.data[3]}<br />
% Chain Completed: ${Math.round(
params.data[0]
)}<br />
% Buffer Consumed: ${Math.round(params.data[1])}`;
} else return;
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
show: false
},
{
type: 'value',
min: 0,
max: 100,
show: true,
position: 'bottom'
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 120
}
],
series: [
{
name: 'green',
type: 'line',
color: 'green',
stack: 'Total',
areaStyle: { color: 'green', opacity: 0.8 },
emphasis: {
focus: 'none'
},
data: [0, 80]
},
{
name: 'yellow',
type: 'line',
color: 'yellow',
stack: 'Total',
areaStyle: { color: 'yellow', opacity: 0.8 },
emphasis: {
focus: 'none'
},
data: [20, 20]
},
{
type: 'line',
name: 'red',
color: 'red',
stack: 'Total',
areaStyle: { color: 'red', opacity: 0.8 },
emphasis: {
focus: 'none'
},
data: [80, 0]
},
{
type: 'line',
name: 'black',
color: 'black',
stack: 'Total',
areaStyle: { color: 'black', opacity: 0.8 },
emphasis: {
focus: 'none'
},
data: [120, 120]
},
{
name: 'Bubble',
type: 'scatter',
data: [
[
49.82868330885952, //x
27.606461086637275, //y
1000000000, //size
'project 1' //name
],
[
49.82868330885952, //x
64.606461086637275, //y
100000000, //size
'project 2' //name
]
],
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
xAxisIndex: 1,
emphasis: {
focus: 'item',
scale: true,
label: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
shadowBlur: 10,
shadowOffsetY: 5,
opacity: 1,
color: '#000000'
}
}
]
};```

I solved this by setting the scatter series' zLevel attribute to 1.
name: 'Bubble',
type: 'scatter',
zLevel: 1,
data: [
[
49.82868330885952, //x
27.606461086637275, //y
1000000000, //size
'project 1' //name
],
[
49.82868330885952, //x
64.606461086637275, //y
100000000, //size
'project 2' //name
]
],
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
}```

How to create a stacked line chart using Apache ECharts using encode

I see this example in Apache ECharts
https://echarts.apache.org/examples/en/editor.html?c=line-stack
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
option && myChart.setOption(option);
Now that ECharts v5.x has support to specify encode , is it possible to create the above chart using encode instead of specifying data array for each series?
What i am looking for is something on these lines
option = {
title: {
text: 'Some Title'
},
tooltip: {
trigger: 'axis'
},
dataset:{
source:[
['XAxis_Column_Name','Series_Column_Name','YAxis_Column_Name'],
['x1','s1',10],
['x2','s2',20],
['x3','s1',40],
['x4','s1',70],
['x5','s2',90],
['x5','s1',100],
['x6','s3',120],
]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
encode:{
x: "XAxis_Column_Name"
}
},
yAxis: {
type: 'value',
encode:{
y: "YAxis_Column_Name"
}
},
series: [
{type: 'line'},
{type: 'line'},
{type: 'line'}
]
};
The end result should be a line chart with 3 lines (one each for s1, s2 and s3). Any help here is much appreciated. I don't want to deal with data extraction and segregating them into arrays for each series

ApexChart Column on top of other columns

I'm new using ApexChart and I am having issue with a bar chart. I create the ApexChart, but the columns does not look aligned.
var options777 = {
chart: {
id: 'test',
height: 350,
type: 'bar'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Eligibility',
data: [ 438, 360, 171, 322, 248, 190, 121, 206, 3 ]
}],
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
grid: {
row: {
colors: ['#fff', '#f2f2f2']
}
},
xaxis: {
labels: {
rotate: -45
},
categories: [ "2020-04-27", "2020-04-22", "2020-04-20", "2020-04-24", "2020-04-23", "2020-04-28", "2020-04-25", "2020-04-21", "2020-04-19" ],
tickPlacement: 'on',
type: 'datetime'
},
yaxis: {
title: {
text: 'Eligibility',
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: "horizontal",
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 0.85,
opacityTo: 0.85,
stops: [50, 0, 100]
},
}
};
var chart777 = new ApexCharts(
document.querySelector("#myChart"),
options777
);
chart777.render();
When the chart is rendered it looks like the image below. Why are the columns like that? Shouldn't it be one beside another?