Does anybody know. How to make a multiple lines of axis label with Echart (https://echarts.apache.org/examples/en/)?
I need a group label (year, season, ..) and vertical lines for separating groups.
Thank you.
Vertical lines can draw with markLine, see example.
Just add second xAxis with desired labels, something like this:
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
xAxis: [{
data: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
},{
position: 'bottom',
offset: 30,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
data: ['Winter', 'Spring', 'Summer', 'Autumn']
}],
yAxis: {},
series: [{
name: 'Series',
type: 'bar',
data: [5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 1024px;height:400px;"></div>
Related
I am working on a project and we are using a chart created with chart js. I want to give the legend a background color (the top part thats drawn in the image). After a lot of searching on the internet i stil havent found a solution to my problem so i thought lets try stack overflow. can some one help me Please??>!
the part i want to give a background color
here is part of my code
enter code here
<div>
<canvas id="myChart"></canvas>
</div>
<script>
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
};
const config = {
type: 'line',
data: data,
options: {}
};
var myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
You can use a custom plugin for this:
const plugin = {
id: 'legendBackground',
beforeDraw: (chart, args, opts) => {
const {
chartArea: {
width,
top,
left
},
ctx
} = chart;
ctx.fillStyle = opts.color || 'transparent';
ctx.fillRect(left, 0, width, top)
}
}
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
}]
},
options: {
plugins: {
legendBackground: {
color: 'pink'
}
}
},
plugins: [plugin]
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>
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>
Noticed that dataZoom in echarts only display series for the first category rather than a total across all categories.
For example, consider a cluster bar chart that contains 3 categories (2015,2016,2017). DataZoom displays trend for the 2015 by default rather than total across 2015,2016 and 2017. Any recommendations on how to improve the display as it might be misleading to the end user?
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 185.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
dataZoom: [
{
show: true,
type: 'slider',
start: 0,
end: 100,
filterMode: 'filter'
},
{
type: 'inside',
start: 0,
end: 100
},
{
show: false,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
Thanks,
Dee
Could you explain «DataZoom displays trend for the 2015 by default»? I tried to find the troubles and just pasted you code to editor. It's look as was expected — DataZoom show all clusters, what's wrong?
var myChart = echarts.init(document.getElementById('main'));
var option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 185.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
dataZoom: [
{
show: true,
type: 'slider',
start: 0,
end: 100,
filterMode: 'filter'
},
{
type: 'inside',
start: 0,
end: 100
},
{
show: false,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I want to color the area "under" the graph (i.e. between zero and value) green when positive, and red when negative, on an eCharts line graph.
Like this
We have already done it with a bar graph (below), but now we need to do it with a line graph.
You can achieve this by setting the visualMap property. I have done some hit and trial and achieved the following.
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, -1200, -800, 1330, 1320],
type: 'line',
areaStyle: {}
}],
visualMap: {
left: 'right',
min: 0,
max: 1,
inRange: {
color: ['red', 'green']
},
text: ['>0', '<0'],
calculable: true
},
};
// use configuration item and data specified to show chart
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I have a multidimensional array structured like this: [[year,month,day,value],[year2,month2,day2,value2],[year3,month3,day3,value3]...]. Each value is an integer number. I would like to build an Highcharts Histogram chart: in the xAxis there are the YEARS, in the yAxis the MONTHS. Now, in the columns i would like to have the sum of the VALUES for that year (example: column 2009 with the sum of all values that have 2009 as year). In the markers, i would like to have them
distributed according to the month of that year (example: in column 2009, markers with month 1 at the left, and with month 12 at the right of that column, and also for other columns).
Is it possible to do with this type of chart? Thanks a lot.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var data = [[2014,1,10,3],[2014,2,3,9],[2013,12,4,7],[2012,3,6,7],[2009,8,5,9],[2010,11,31,5],[2016,1,1,3],[2011,12,13,9],[2016,2,14,7],[2017,5,29,6],[2008,8,15,4],[2013,11,31,5]];
Highcharts.setOptions({
colors: ['green', 'blue', 'yellow', 'orange', 'red', 'violet', 'pink', 'brown', 'black']
});
$(function () {
Highcharts.chart('prova',{
title: {
text: 'Distribuzione articoli'
},
xAxis: [{
title: { text: 'Anno' },
min: 2009,
max: 2017,
type: 'category'
}, {
title: { text: 'Mese' },
opposite: true,
}],
yAxis: [{
title: { text: 'Giorno' },
min: 0,
max: 12,
labels: {
step: 1,
}
}, {
title: { text: 'Sequenza temporale' },
opposite: true,
}],
series: [{
name: 'Sequenza temporale',
type: 'histogram',
xAxis: 1,
yAxis: 1,
baseSeries: 's1',
zIndex: -1
}, {
name: 'Articoli',
type: 'scatter',
data: data,
id: 's1',
marker: {
radius: 1.5
}
}]
})
})
})
</script>
<div id="prova" height="400px" width="800px"></div>