Related
When I have a chart over several months, the interval is set to include the first of the month making intervals uneven and causing labels to overlap. Is this the expected behavior? Is there a way to disable this?
example
Here is an example based off one of echarts examples.
option = {
xAxis: {
type: 'time',
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
symbol: 'none',
lineStyle: {
color: '#5470C6',
width: 5
},
data: [
['2019-08-17', 200],
['2019-10-10', 200],
['2019-10-11', 560],
['2019-10-12', 750],
['2019-10-13', 580],
['2019-10-14', 250],
['2019-10-15', 300],
['2019-10-16', 450],
['2019-10-17', 300],
['2019-11-15', 100]
]
}
]
};
If you want even intervals, you can instruct echarts to treat the dates as discrete values by changing the configuration of the axis:
xAxis: {
type: 'category',
}
I'm trying to make a chart in Apache eCharts that is a single ring with a large number in the middle. I want to use it to display a website score.
This is the closest image example I can find online of what I am trying to achieve:
And I have found these polar bar charts in the Apache eCharts docs which look great:
But I don't know how to only have one large ring with a number displayed in the middle.
Do you know how I can achieve that?
Here is my current code, taken from the docs:
option = {
angleAxis: {
show: false,
max: 10
},
radiusAxis: {
show: false,
type: 'category',
data: ['AAA', 'BBB', 'CCC', 'DDD']
},
polar: {},
series: [
{
type: 'bar',
data: [3, 4, 5, 6],
colorBy: 'data',
roundCap: true,
label: {
show: true,
position: 'start',
formatter: '{b}'
},
coordinateSystem: 'polar'
}
]
};
You probably want a variant of the Gauge chart.
here is a series that would create something very close to your first image example.
series: [
{
type: 'gauge',
startAngle: 90,
endAngle: 270,
min: 0,
max: 100,
progress: {
show: true,
width: 18
},
pointer: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
title: {
show: false
},
itemStyle: {
color: 'blue'
},
detail: {
formatter: '{value}',
color: 'auto',
offsetCenter: [0, '-0%'],
valueAnimation: true,
},
}
]
Here is a link to an example that is similar to your second image
I have a chart which effectively renders a timeline, but sometimes the tick positions are too close together
Current graph (padding: 25)
I can change the padding to be negative which puts them above the x-axis:
Ticks above x-axis (padding: -60)
But I'd prefer them to alternate to above and below eg 1st tick below, 2nd tick above, 3rd tick below etc.
Can I access the individual ticks padding to do this? See below my current code:
ticks: {
source: 'data',
maxRotation: 90,
minRotation: 90,
font: {
size: 12,
},
autoskip: true,
padding: -60,
},
TIA for any help! :-)
You can define two identical datasets together with two x-axes. One of the x-axes with position: 'top', the other one with default position ('bottom').
A slightly different ticks.callback function on both x-axes makes sure that only every second tick is displayed.
ticks: {
source: 'data',
...
callback: (v, i) => i % 2 ? v : ''
},
Please take a look at the following runnable code and see how it works.
const data = [
{ x: "2022-03-22", y: 0 },
{ x: "2022-04-01", y: 0 },
{ x: "2022-04-02", y: 0 },
{ x: "2022-04-03", y: 0 },
{ x: "2022-04-08", y: 0 },
{ x: "2022-04-12", y: 0 },
{ x: "2022-04-15", y: 0 }
];
new Chart('chart', {
type: 'line',
data: {
datasets: [{
data: data,
backgroundColor: 'black',
pointRadius: 5,
pointHoverRadius: 5,
borderWidth: 2,
xAxisID: 'x'
},
{
data: data,
backgroundColor: 'black',
pointRadius: 5,
pointHoverRadius: 5,
borderWidth: 2,
xAxisID: 'x2'
}]
},
options: {
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: context => undefined
}
}
},
scales: {
y: {
ticks: {
display: false,
},
grid: {
display: false,
drawBorder: false
}
},
x: {
position: 'top',
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
},
ticks: {
source: 'data',
minRotation: 90,
callback: (v, i) => i % 2 ? v : ''
},
grid: {
display:false,
drawBorder: false
}
},
x2: {
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
},
ticks: {
source: 'data',
minRotation: 90,
callback: (v, i) => i % 2 ? '' : v
},
grid: {
display:false,
drawBorder: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#1.0.0"></script>
<canvas id="chart" height="50"></canvas>
echarts: bar chart bars are located left and right of the value on the category axis:
How to tell echarts to start the bar with the value on the category axis? Like this:
To clarify the problem, here ist another example. This is a chart of the hourly sum of precipitation. Every bar should show the sum from the bottom to the top of the hour, the data values are conencted to every bottom of the hour.
as you can see, the bars are not starting at 8:00, they are starting at 7:30.
Data: (timestamps are shown in CET)
series: [
{
name: "Niederschlag",
type: "bar",
data: [[1608534000000, 3], [1608537600000, 5], [1608541200000, 2], [1608544800000, 0], [1608548400000, 1] ],
barWidth: '100%'
}
]
It should look like this:
Start point of bar here doesn't matter, you need align labels to left: https://echarts.apache.org/en/option.html#series-bar.label.align
you need a hidden xAxis like below:
option = {
xAxis: [{
type: 'category',
data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
show: false
}, {
type: 'category',
data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24],
boundaryGap: false,
axisTick: { alignWithLabel: true },
position: 'bottom'
}],
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130,120,210,110,210],
type: 'bar',
barCategoryGap:'20%',
itemStyle: {
},
xAxisIndex: 0,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
You have not provided the complete chart config, so I recommend using this one. Also pay attention on method useUTC and you need to know that "By default, echarts uses local timezone to formate time labels"
So I see this state of Chart by you data with offset -180:
var myChart = echarts.init(document.getElementById('chart'));
var chartData = [
[1608534000000, 3],
[1608537600000, 5],
[1608541200000, 2],
[1608544800000, 0],
[1608548400000, 1],
];
var option = {
tooltip: {},
xAxis: {
type: 'time',
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
splitNumber: 24,
},
yAxis: {
type: 'value'
},
series: [{
name: "Niederschlag",
type: "bar",
data: chartData,
barWidth: '100%',
}],
useUTC: false,
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.9.0/dist/echarts.min.js"></script>
<div id="chart" style="width: 1024px;height:400px;"></div>
I have a chart with average CPU (AVG-CPU) and Max CPU (MAX_CPU). AVG-CPU is BAR while MAX-CPU is Line chart. I'm trying to use 2 yaxis (left is AVG_CPU / right is MAX_CPU). However, when I change min/max on the yaxis for AVG_CPU in order to scale it better, the MAX_CPU lines go off the chart (they don't show anymore).
Here is the code w/o scaling AVG-CPU
yAxis: [
{
id: 'AvgAxis',
type: 'value',
name: 'Average CPU %',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %'
}
},
{
id: 'MaxAxis',
type: 'value',
name: 'Max CPU %',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %'
} }
]
Here is results:
Here is code when I try to scale the AVG-CPU
yAxis: [
{
id: 'AvgAxis',
type: 'value',
name: 'Average CPU %',
min: 0,
max: 50,
interval: 5,
axisLabel: {
formatter: '{value} %'
}
},
{
id: 'MaxAxis',
type: 'value',
name: 'Max CPU %',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %'
} }
],
And here is the results:
Note that the MAX_CPU lines are gone. They seem to be off the chart because I scaled the AVG-CPU.
Any Ideas or suggestions would be welcomed.
#JimRitchhart, both series use the same yAxis and type: 'line' just didn't fit in new range in view frame when you change max value. For display both series need explicitly bind each to yAxis index.
series: [{
type: 'bar',
yAxisIndex: 0,
//...
},
{
type: 'line',
yAxisIndex: 1,
//...
}]
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts'
},
tooltip: {},
legend: {
data:['Label']
},
xAxis: {
data: ["Category1","Category2","Category3","Category4","Category5","Category6"]
},
yAxis: [
{
id: 'AvgAxis',
type: 'value',
name: 'Average CPU %',
min: 0,
max: 30,
interval: 5,
axisLabel: { formatter: '{value} %' }
},
{
id: 'MaxAxis',
type: 'value',
name: 'Max CPU %',
min: 0,
max: 100,
interval: 10,
axisLabel: { formatter: '{value} %' }
}
],
series: [{
yAxisIndex: 0,
name: 'Average',
type: 'bar',
data: [5, 7, 4, 3, 4, 6],
},
{
yAxisIndex: 1,
name: 'Max',
type: 'line',
data: [65, 80, 96, 70, 70, 80],
}
]
};
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts-en.common.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>