Related
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>
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>
I am using Highcharts for generating a two column bar graph. Means for each day I am showing the number of downloads and number of signups. Now I need to have a drilldown, which shows up the hourly data. The Highcharts docs is showing an example for Signle column by specifying the y value. But as I am showing stached bar, I have two y values for the same date. The code I am using is as follows :
series: [{
name : 'Signups,
color : '#0066FF',
data : <?=$series_1?>, //data in JSON format from PHP
drilldown: true
}, {
name : 'Downloads',
color : '#E81531',
data : <?=$series_2?>, //data in JSON format from PHP
drilldown: true
}],
Example for you for drilldown with two series, with stacking: 'normal': http://jsfiddle.net/6zYmJ/10/
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}, {
name: 'Things2',
colorByPoint: true,
data: [{
name: 'Animals2',
y: 5,
drilldown: 'animals2'
}, {
name: 'Fruits2',
y: 2,
drilldown: 'fruits2'
}, {
name: 'Cars2',
y: 4,
drilldown: 'cars2'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
},{
id: 'animals2',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits2',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars2',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
})
Adding to Pawel Response-
Just replace in plotOptions with this value
column: {
pointPadding: 0.2,
borderWidth: 0
}
,