I'm trying to highlight a specific part in a graph by date. The graph is dates in X axis and value in Y axis. I tried doing like this example but I get the error TypeError: Cannot read properties of undefined (reading 'coord')
This is my graph's code:
{
xAxis: {
type: "category",
data: xaxis,
show: true,
axisLabel: {
formatter: function(params:any){
return (new Date(params)).toLocaleString('pt-BR')
}
}
},
yAxis: {
type: "value",
name: 'Eficiência de Consumo (Nm³/ton)',
axisLabel: {
formatter: '{value}'
}
},
dataZoom: [
{
type: 'inside'
}
],
tooltip: {
trigger: "axis",
formatter: function(params:any){
const seriesName = params[0].seriesName
const timeStamp = (new Date(params[0].axisValue)).toLocaleString('pt-BR')
const eficiencia = params[0].value
return `${seriesName} <br/> ${timeStamp}: ${eficiencia} Nm³/ton`
},
axisPointer: {
label: {
backgroundColor: "#6a7985"
}
}
},
legend: {
orient: 'horizontal',
top: 'top'
},
visualMap: {
show: false,
pieces: [
{
min: startAlertTime,
max: endAlertTime,
color: '#FBDB0F'
}
]
},
series: [{
data: yaxis,
name: 'Eficiência de Consumo',
type: "line",
}]}
startAlertTime and endAlertTime are ISO timestamps like so '2022-06-13T10:42:22.772Z'. I'd like to highlight the graph between those two points. This is my graph with no VisualMap:
Graph with no visualmap
This is what I'd like to do based on the timestamps on the X axis:
Desired output
visualMap is going to color the line. If you want to color an area (like in your desired output), you'll have to use series.markArea. Both are used on the example you gave.
Related
I am using antd Charts in my project to plot timeseries data. My data has datapoints only till 18:30 pm but antd Line Chart plots extra x-axis width which makes it look like the data is missing.
This is my config:
const config = {
width: window.innerWidth - 100,
data: res,
xField: 'time',
yField: 'value',
seriesField: 'key',
yAxis: {
title: { position: 'center', text: labelText, autoRotate: true },
grid: {
line: {
style: {
stroke: '#ddd',
},
},
},
},
xAxis: {
type: 'time',
mask: 'HH:mm Z',
label: {
formatter: (value) => {
if (timezone === 'utc') {
return moment(value, 'HH:mm ZZ').utc().format('HH:mm Z');
}
return moment(value, 'HH:mm').format('HH:mm Z');
},
},
grid: {
line: {
style: {
stroke: '#ddd',
},
},
},
},
tooltip: {
customItems: (originalItems) => {
return originalItems.sort(function (a, b) {
return b.value - a.value;
});
},
},
};
How do I remove the extra x-axis part between 18:30 and 18:47
I have a problem with ApexChart in React. It does not show decimal numbers in the labels of the x-axis and repeats integers instead. It seams like it rounds in the integer. However when go with mouse on the bar it shows the correct value (maybe because of the tooltip I added). Furthermore I wanted to know how I can "artificially" extend the axis to a certain value.
this.state = {
options: {
chart: {
height: '600',
type: 'rangeBar',
toolbar: {
show: true,
autoSelected: 'selection'
},
},
plotOptions: {
bar: {
horizontal: true,
}
},
legend: {
position: 'right'
},
xaxis: {
type: 'numeric',
title: {
text: 'ms'
},
labels: {
show: true
},
decimalInFloat: 3,
},
tooltip: {
custom: ({ dataPointIndex, w }) => {
let s = w.config.series[0].data[dataPointIndex];
return `<div class="apexcharts-tooltip-rangebar"><div>
<span class="category">${s.x}: </span>
<span class="value start-value">${s.y[0]}</span>
<span class="separator">-</span>
<span class="value end-value">${s.y[1]}</span></div></div>`;
}
},
},
series: [
{
data: []
}
],
}
Add formater for xaxis to round to decimal place you want
xaxis: {
...
labels: {
formatter: function (val) {
return val.toFixed(1);
}
}
},
Furthermore I wanted to know how I can "artificially" extend the axis to a certain value.
Set max value in xaxis
I am using basic timeline chart of Apexcharts in React application, where the data contains decimal numbers (e.g: data = [{"x":"TaskData0link_Node0_Node1","y":[0.0,0.05]}].
However when I enter the bars with the mouse I can only see values that are rounded . In this case: 0-0.
Is it somehow possible to display the real values (0-0.05)? And not round it to integer.
The options that I use:
options: {
chart: {
height: 350,
type: 'rangeBar',
toolbar: {
show: true,
autoSelected: 'selection'
},
},
plotOptions: {
bar: {
horizontal: true
}
},
xaxis: {
type: 'numeric',
title: {
text: 'in ms'
},
labels: {
show: true
},
decimalInFloat: 3,
},
},
Thank you in advance!
Use this custom tooltip
tooltip: {
custom: ({ dataPointIndex, w }) => {
let s = w.config.series[0].data[dataPointIndex];
return `<div class="apexcharts-tooltip-rangebar"><div>
<span class="category">${s.x}: </span>
<span class="value start-value">${s.y[0]}</span>
<span class="separator">-</span>
<span class="value end-value">${s.y[1]}</span></div></div>`;
}
},
//There are two ways for its solution :-
`1) options.yaxis: {
labels: {
formatter: function(value) {
return "$" + value.toFixed(2);
}
},
tickAmount: 5,
min: 0,
max: 'Your Y axis maximum value here like 5000',
}
2) options.yaxis: {
tickAmount: 5,
`enter code here`
min: 0,
max: 'Your Y axis maximum value here like 5000',
decimalsInFloat: 2
}`
Value shows on Y axis using Apex Chart
I am using react-Echart for drawing some charts.
but I stucked some problems.
From what I read in the document, If I set proper dimension in series props, I can also use value of that dimensions in labels using formatter props.
However, even if I try many times, the formatter doesn't work properly.
Attached is the option data I used. Please check it out and give me an answer.
const option:EChartsOption = {
title: {
show: false
},
xAxis: {
show: false,
type: 'time'
},
yAxis: {
type: 'value',
position: 'right'
},
// ...
dataset:
{
dimensions: [
'date', 'randomV', 'dailyIncome', 'dailyOutcome', 'percent'
],
source: fakeLineGraphData // [{date:string, randomV:number, dailyIncome: number, dailyOutcome:number , percent: number}]
},
series: [{
dimensions: ['date', 'randomV'],
type: 'line',
symbol: 'none',
showSymbol: false,
markPoint: {
itemStyle: {
color: '#74d527'
},
data: [
{
type: 'max',
name: 'Max',
symbol: 'triangle',
symbolSize: 10,
symbolRotate: 180,
symbolOffset: [0, -20],
label: {
position: 'right',
formatter: `max {c} ({#percent}%)`, // don't works!
color: 'gray'
}
},
{
type: 'min',
name: 'Min',
symbol: 'triangle',
symbolSize: 10,
symbolOffset: [0, 20],
label: {
position: 'right',
formatter: `최저 {c} (-${#percent}%)`, // don't works!
color: 'gray'
}
}
]
},
//...
]
};
Doc which I refered : https://echarts.apache.org/en/option.html#series-line.markPoint.label.formatter
I have an angularjs application with the library Highcharts.
In my application I have some graphs and want to export the data of the graphs in a CSV file. So I used the exporting function from highcharts but I have a problem with the dates. On my graphs, I display the dates with a format "MM/DD/YYYY hh:mm:ss" so when I export my data, I have the same format but I would have the dates in milliseconds. I try to change teh 'dateFormat' field in the exporting options but milliseconds is not part of the accepted formats.
This is my graph options:
widgetCtrl.chartDataLine = {
chart: {
type: 'spline',
zoomType: 'x',
isZoomed: false,
marginTop:55
},
title: {
text: 'title',
align:'left',
x: 20,
y: 18,
style: {
fontSize: '14px'
}
},
xAxis: {
type: 'datetime',
title: {
text: 'Date time'
}
},
yAxis: {
title: {
text: 'Power (W)'
}
},
boost: {
enabled: true
},
exporting: {
fallbackToExportServer: false,
enabled: true,
allowHTML: true,
filename: 'myFile',
menuItemDefinitions: {
downloadJSON: {
onclick: function () {
downloadJSON('myFile.JSON', widgetCtrl.chartDataLine.series);
},
text: 'Download JSON'
}
},
csv: {
decimalPoint: '.',
dateFormat: '%Y-%m-%d %H:%M:%S'
},
buttons: {
contextButton: {
menuItems: [
'printChart',
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG',
'downloadCSV',
'downloadJSON'
]
}
}
},
navigation: {
buttonOptions: {
align: 'left'
}
}
series: [...]
};
Do you have an idea how I coul do that without writing myself teh csv file but using the highcharts functions ?
Unfortunately, Highcharts does not have the default option to export data in milliseconds (timestamp). However, it can be done easily by wrapping Highcharts.Chart.prototype.getDataRows method and map the data array which is used for export.
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = row.x;
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/5p1nvq37/