Develop Reference

Line Chart in ReCharts

I have a data set which looks like this:
data = [
{ value: 0, timeStamp: Wed Jun 15 2022 00:00:00 },
{ value: 0, timeStamp: Wed Jun 15 2022 01:00:00 },
{ value: 0, timeStamp: Wed Jun 15 2022 02:00:00 },
{ value: 0, timeStamp: Wed Jun 15 2022 03:00:00 }
];
This dataset is dynamic and I want to show a Line Chart with value on Y-Axis and TimeStamp on XAxis
It should look something like this:
And this is a code that I have written using ReCharts in ReactJS:
<LineChart width={600} height={300} data={data}>
<Line type="monotone" dataKey="value" stroke="#8884d8" />
<XAxis dataKey="timestamp" />
<YAxis dataKey="value" />
</LineChart>
Using the above code I am not able to draw the plot points on the graph. Where am I missing?

AmCharts v5: pre-zooming date axis

I am setting up a candlestick chart from this example:
https://www.amcharts.com/demos/candlestick-chart/
What I am trying to do is to pre-zoom the chart to the last 10% of the available data. In the documentation ( https://www.amcharts.com/docs/v5/charts/xy-chart/zoom-and-pan/ ) it says to use the start parameter:
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
start: 0.9,
renderer: am5xy.AxisRendererX.new(root, {})
})
);
In the note below this code it says if a scrollbar is used, add the very same start offset as in the chart date axis.
So, within the sample code I set:
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
start: 0.95,
groupData: true,
maxDeviation:0.5,
baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {pan:"zoom"}),
tooltip: am5.Tooltip.new(root, {})
})
);
and for the srollbar:
var sbxAxis = scrollbar.chart.xAxes.push(
am5xy.DateAxis.new(root, {
start: 0.95,
groupData: true,
groupIntervals: [{ timeUnit: "week", count: 1 }],
baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {
opposite: false,
strokeOpacity: 0
})
})
);
I tried everything. I tried from https://www.amcharts.com/docs/v5/charts/xy-chart/axes/category-date-axis/
xAxis.zoomToDates(new Date(2021, 0, 1), new Date(2022, 0, 1));
and
series.events.once("datavalidated", function(ev) {
ev.target.get("xAxis").zoomToDates(new Date(2021, 0, 1), new Date(2022, 0, 1));
});
I tried adding "end: 1" to both elements. No luck.
Please, advice. Thanks a lot in advance.

As it happens the second option was correct and works fine. The confusion was with the dates. All the dates data for the chart is in timestamp which caused the confusion. Just in case posting here a final result - zooming to the last 130 records of the data and adding additional margin to the right for a little "air":
series.events.once("datavalidated", function(ev) {
//pre-zooming to last date
var startDate = chartData[0].date;
if(chartData.length >= 130){
startDate = chartData[chartData.length - 130].date;
}
ev.target.get("xAxis").zoomToDates(new Date(startDate), new Date(chartData[chartData.length - 1].date + 600000));
});
Here we take the first alement as the start date and if there are more than 130 records, we take only those 130. On the finale line I add 600000 to the last date (I have minutely chart, so I am adding 10 minutes: 60 seconds * 10 minutes * 1000 microseconds).
Hope this helps someone some day.

Recharts Tooltip displays same value

I have an issue where the tooltip is displaying the same value for different series. So whenever I hover on the popover, I get the following:
Here's my implementation:
<LineChart margin={{ top: 15, right: 5, bottom: 5, left: 10 }}>
<XAxis
type='number'
dataKey='timestamp'
padding={{ left: 30, right: 30 }}
domain={['dataMin', 'dataMax']}
height={90}
tickFormatter={(unixTime) => dayjs(unixTime).format('MM/DD h:mm A')}
tickMargin={30}
/>
<YAxis
dataKey='Demand'
tickFormatter={(val, _axis) => numeral(val).format('0,0') + ' kW'}
/>
{chartData && this.renderLines(chartData, theme)}
<CartesianGrid strokeDasharray='3 3' />
<Legend />
<Tooltip
content={<LiveDailyDemandTooltip
format={{
Demand: '0.0'
}} />}
/>
</LineChart>
Where the data looks like:
{
"dataID-1": [
{Demand: 4237, timestamp: 1564977600000}
...
],
"dataID-2": [
{Demand: 112, timestamp: 1564977600000}
...
]
}

As mentioned here: https://github.com/recharts/recharts/issues/1625
You should set allowDuplicatedCategory to false in XAxis:
<XAxis allowDuplicatedCategory={false}/>
This will resolve the problem of duplicate value in tooltip.

I was able to resolve this by providing the data in a different format. It seems that Recharts needs to have data grouped by their X-Axis value:
[
{ timestamp: 1564977600000, Demand1: 4237, Demand2: 112 },
...
]

Change Google-Visualization Timeline Date/Time-Format

I have a problem formatting the horizontal axis in my google timeline chart. The problem is that I have different data sets where the time range can be days or hours or maybe minutes. The timeline chart formats its hAxis on its own but it uses american date format. I want to have the ISO date format (e.g. 22/07/2015) and time like hh:mm. I saw an formating example for the google corechart on the docs: https://developers.google.com/chart/interactive/docs/datesandtimes (last one on page)
I tried to apply it to my problem:
https://jsfiddle.net/ezcxd61m/2/
var options = {
width: 900,
height: 500,
legend: {position: 'none'},
enableInteractivity: false,
chartArea: {
width: '85%'
},
hAxis: {
viewWindow: {
min: new Date(2013, 9, 13),
max: new Date(2015, 0, 3, 1)
},
gridlines: {
count: -1,
units: {
days: {format: ['dd.MM.yyyy']},
hours: {format: ['HH:mm', 'hh']},
minutes: {format: ['HH:mm', ':mm']}
}
},
minorGridlines: {
units: {
days: {format: ['dd.MM.yyyy']},
hours: {format: ['hh:mm:ss', 'hh']},
minutes: {format: ['HH:mm', ':mm']}
}
}
}
};
But it seems that it doesn't work for the timeline chart. Can anyone help me?
Thanks,
Rob

I had a similar issue, starting from your first attempt I guess I managed to get what you were asking for. Just change the hAxis in the options var as follows:
hAxis: {
format: 'dd.MM.yyyy HH:MM'
}
I've applied the changes in the url you provided
https://jsfiddle.net/ezcxd61m/2/

You will need to set the hAxis.format() depending on the thresholds you set.
If this threshold is minutes, set the hAxis one way.
If this threshold is hours, set it another, and if its days, or weeks, or months or years set it a different way.
Just check the threshold condition before writing the chart, and apply it to the options object.

Highstock xAxis datetime

I use Highstock to display a graph showing the number of visitors in column and I need the zoom to display the number of visitors per day, per month and per year
In my graph I can display a number of visitor per day, but I would like display a number of visitor per month and per year too.
But when I look my graph (per month) I don't have a graph with 12 column, I have a graph with 365 column (one per day).
I use the type datetime for xAxis, but it doesn't work...
x rangeSelector: {
inputDateFormat:'%d.%m.%Y',
inputEditDateFormat:'%d.%m.%Y',
buttonTheme: {
width: 80
},
buttons: [{
type: 'day',
count: 7,
text: 'day'
}, {
type: 'month',
count: 12,
text: 'month'
}, {
type: 'year',
count: 1,
text: 'years'
}],
selected: 0
},
Axis: {
minTickInterval: 24 * 3600 * 1000,
type: 'datetime',
title: {
text: 'Time'
},
dateTimeLabelFormats: {
day: '%d.%m<br/>%Y'
}
}
How can I have a graph with "a addition of the visitors per column" ?
Below is what I get now. The first graph is OK, but the second, it's not OK. I would 12 columns and not 365.
Per Days:
Per Years:

Range selector buttons affecting to the time span which should be displayed on a chart. If you want to display specific unit on a chart, you need to use forced dataGrouping, see:
http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.units
http://api.highcharts.com/highstock#plotOptions.series.dataGrouping.forced
Example could be found here: http://www.highcharts.com/stock/demo/candlestick-and-volume