above e chart gets more date range to the single date value. I want to shrink it and have equal date ranges to each datapoint. how to do that?
const makeChart = () => {
const chart = echarts.init(chartRef.current);
const options = {
xAxis: {
type: "category",
data: timestamp,
name: "TimeStamp",
nameLocation: "middle",
nameTextStyle: {
align: "center",
verticalAlign: "top",
lineHeight: 40,
},
},
yAxis: [
{
type: "value",
name: "a1",
min: 0,
max: 1,
axisLabel: {
formatter: "{value}",
},
},
{
type: "value",
name: "a2",
axisLabel: {
formatter: "{value}",
},
},
],
calculable: true,
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
},
},
legend: {
left: 0,
},
tooltip: {
trigger: "axis",
},
grid: {
right: 30,
left: 50,
},
series: [
{
name: "a1",
type: "line",
data: a1Values,
},
{
name: "a2",
type: "line",
yAxisIndex: 1,
data: a2Values,
},
],
dataZoom: [
{
show: true,
xAxisIndex: 0,
height: 15,
start: 20,
end: 100,
height: 14,
bottom: 8,
},
{
type: "inside",
start: 20,
end: 100,
},
{
show: true,
yAxisIndex: 0,
filterMode: "empty",
width: 15,
height: "80%",
showDataShadow: false,
right: "0%",
},
],
};
chart.setOption(options);
return () => {
chart.dispose();
};
};
useEffect(() => {
makeChart();
}, []);
above is the code that i used to generate the chart. what are the things that i have to use to change this to make the changes to show a chart like this, and when zooming the chart i want to show all the shrink datapoints too
You need to use xAxis
type "time" instead of "category". If neccessary you can then customize the interval with minInterval / maxInterval and bring the timestamps into a format of your choice with the axisLabel formatter function.
const data = [
{ timestamp: '2023-02-28 00:00:00', a1: 1, a2: 377.8543583 },
{ timestamp: '2023-02-28 14:30:00', a1: 1, a2: null },
{ timestamp: '2023-02-28 15:00:00', a1: 1, a2: null },
{ timestamp: '2023-02-28 15:30:00', a1: 1, a2: null }
];
option = {
dataset: [
{source: data}
],
xAxis: {
type: 'time',
maxInterval: 1000 * 60 * 60 * 24, // standard resolution of time axis is in milliseconds
axisLabel: {
showMaxLabel: true,
}
},
yAxis: {},
series: [
{
type: 'line',
encode: {
x: 'timestamp',
y: 'a1'
}
},
]
};