I am trying to create a line chart where the x-axis is in the format of "Month Year" (ex Jun 2014), but instead of showing the month of the actual data point the ticks are all showing as **Jan** and the labels don't match up with the plot points.
I am expecting there to be 3 XLabels for Jun 2014, Jun 2015, Jun 2016 but instead, there are only 2 labels for Jan in between.
var data1 = [{
x: '06/01/2014',
y: 1853
}, {
x: '06/01/2015',
y: 5087
}, {
x: '06/01/2016',
y: 3078
}];
data1.forEach(function(el, i) {
data1[i].x = new Date(el.x).getTime();
});
Highcharts.chart('container', {
chart: {
type: 'area'
},
xAxis: {
type: 'datetime',
labels: {
formatter: function(){
return Highcharts.dateFormat("%b %Y", this.value)
}
}
},
series: [{
name: 'Data',
data: data1
}]
});
Fiddle
You can take advantage of tickPositioner:
xAxis: {
tickPositioner: function() {
return this.series[0].xData;
},
...
}
Live demo: http://jsfiddle.net/BlackLabel/of7k0vxh/
API Reference: https://api.highcharts.com/highcharts/xAxis.tickPositioner
I am trying to make a graph that shows how much power solarpanels are produsing using chartJS. I am using data in the following format
{x: Fri Mar 19 2021 06:20:28 GMT+0100 (centraleuropeisk normaltid), y: 1.88}
And it makes a graph but the x values is not in a readable date format. The graph liks like this:
Link to picture of graph (I am not allowed to post images yet apparently)
https://i.imgur.com/HUOHoqg.png
To make the graph I use this code:
var ctx = document.getElementById("lineChart");
var line = new Chart(ctx, {
type: "scatter",
data: {
datasets: [
{
data: power,
borderColor: "#ffd420",
showLine: true,
fill: false,
},
],
},
options: {
tooltips: { enabled: false },
hover: { mode: null },
elements: {
point: {
radius: 0,
},
},
//---
xAxes: [],
//--
},
});
I have tried to play with the xAxes settings but it still show a large number instead of a date.
Does anyone know what settings can fix this or do I need to change the format of the input?
I have searched alot but I can't find a solution to this problem.
There are 2 options, you can make use of the timescale provided by chart.js in here you can set what format you want it to show the dates: https://www.chartjs.org/docs/latest/axes/cartesian/time.html
The other options is to use the tick callback to do it yourself like this:
options: {
scales: {
xAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
const date = new Date(value)
return `${date.getDate()}/${date.getMonth()}/${date.getFullYear()}`
}
}
}]
}
}
When displaying time based data using Chart.js, the data itself doesn't seem to be aligned with the X axis labels. For instance, when the data is for 2016-11-30, the bar is actually showing in December. The last date in a series of dates doesn't even show on the chart. How can I make them align correctly?
$(document).ready(function(){
var config = {
type: 'bar',
data: {
labels: [
'2016-11-30', // Why showing in December?
'2017-04-01', // Why not showing in beginning of April?
'2017-06-30'], // Why not showing?
datasets: [{
label: 'Contacts',
backgroundColor: 'red',
data: [
1,
5,
7
]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize:1
}
}],
xAxes: [{
type: 'time',
barThickness:2,
time: {
unit: 'month'
}
}]
}
}
};
var Canvas = $("#Chart");
var cc = new Chart(Canvas, config);
});
Example on Codepen:
https://codepen.io/skunkbad/pen/EmBJMa
Regarding the showing on the wrong date:
This is because of how you instantiate a date object and how it relates to timezones, your browser is likely resolving that to your timezone and you get a different value.
I am on GMT-3 and this is what happens for me for example:
$ new Date('2016-11-30')
- Tue Nov 29 2016 21:00:00 GMT-0300 (BRT)
$ new Date(2016, 11, 30)
- Fri Dec 30 2016 00:00:00 GMT-0300 (BRT)
Regarding not showing last data:
The bar is plotted but it's not on visible location. It's possible to verify this on this JSFiddle (not sure why not on codepen), if you move your mouse to the very edge of the screen the label will appear.
This is a known issue and is being tracked here: #2415
If possible, I think that the easiest workaround would be to manually define a max property on your time scale
Background
I have a HighCharts JS chart being updated every minute, but with the chart initially populated using the load event in the chart config.
My problem is that when I call addPoint on the series, the chart shifts all of it's data and leaves the chart with only the one new data point in the middle of the chart.
chart.series[0].addPoint(["Thu, 22 Sep 2016 13:21:58 GMT", 98], true, true)
chart.series[1].addPoint(["Thu, 22 Sep 2016 13:21:58 GMT", 64], true, true)
Here is what my chart looks like on loading the page...
Now here is what it looks like after addPoint...
EDIT - Chart configuration added
{
chart: {
type: 'line',
zoomType: 'x',
events: {
load: requestInitialData
}
},
credits: {
enabled: false
},
title: {
text: undefined
},
plotOptions: {
series: {
marker: {
enabled: false,
radius: 2
},
lineWidth: 2
}
},
series: [],
xAxis: {
labels: {
enabled: true
}
},
yAxis: {
min: 30,
max: 150,
startOnTick: false,
endOnTick: false
}
}
EDIT - Added JSFiddle Problem Click button once to add initial data and then subsequent clicks to see the problem
EDIT - Problem Solved It appears a bug was introduced into a recent version of HighCharts, since 4.2.2, which does work for me. 4.2.7 doesn't
Problem Solved...it was a bug in HighCharts 4.2.7 and possibly previous versions. Works in 4.2.2 though
I am trying to render both a CandleStick chart with a Line chart.
Here is the JSFiddle of my failing example: https://jsfiddle.net/7wyp6yy3/1/
Here is the JSFiddle of my CandleStick chart: https://jsfiddle.net/7jadqnsb/
What I did, on top of my Candlestick code, I added the default seriesType of candlesticks, and assigned the 5-th column as a line-chart
seriesType: 'candlesticks',
series: {4: {type: 'line'}}
For my data, I simply added a fourth column of integers:
["Mon, Aug 10 2015",2080.98,2080.98,2104.18,2105.35, 500],
["Tue, Aug 11 2015",2076.49,2102.66,2084.07,2102.66, 500],
["Wed, Aug 12 2015",2052.09,2081.10,2086.05,2089.06, 500],
["Thu, Aug 13 2015",2078.26,2086.19,2083.39,2092.93, 500],
["Fri, Aug 14 2015",2080.61,2083.15,2091.54,2092.45, 500],
["Mon, Aug 17 2015",2079.30,2089.70,2102.44,2102.87, 500],
["Tue, Aug 18 2015",2094.14,2101.99,2096.92,2103.47, 500],
["Wed, Aug 19 2015",2070.53,2095.69,2079.61,2096.17, 500],
["Thu, Aug 20 2015",2035.73,2076.61,2035.73,2076.61, 500],
["Fri, Aug 21 2015",1970.89,2034.08,1970.89,2034.08, 500],
["Mon, Aug 24 2015",1867.01,1965.15,1893.21,1965.15, 500],
["Tue, Aug 25 2015",1867.08,1898.08,1867.61,1948.04, 500],
["Wed, Aug 26 2015",1872.75,1872.75,1940.51,1943.09, 500],
["Thu, Aug 27 2015",1942.77,1942.77,1987.66,1989.60, 500],
That said, I am getting the following error with my new code:
Last domain does not have enough data columns (missing 3)
I tried changing the series index to a variety of values, but no dice.
You must set series.1 , the number doesn't refer to a column, it's the index of a serie.
What happens: default serieType is candlesticks, so the first serie (index: 0 ) will automatically be of type "candlesticks"...a candlestick-chart requires 4 data-columns
When you set series.4 the API will automatically create series.0, series.1, series.2 and series.3 ....and all of them will be candlesticks
Let's see the data-columns as a stack of data.
The API creates the series:
serie.0
...will be candlesticks , requires 4 data-columns, the first 4 data-columns will be removed from the stack
serie.1
...also candlesticks, requires 4 data-columns, but there is only 1 data-column left on the stack (3 are missing....that's what the error means)
I know this is a bit old, but I just ran into the same problem. Dr.Molle's answer put me in the right direction, but I think it could use a bit more clarification.
In summary your last column should be put at the beginning so that it looks like:
["Mon, Aug 10 2015",500,2080.98,2080.98,2104.18,2105.35],
["Tue, Aug 11 2015",500,2076.49,2102.66,2084.07,2102.66],
["Wed, Aug 12 2015",500,2052.09,2081.10,2086.05,2089.06],
...
Then in your 'options' variable you can put:
seriesType: 'candlesticks',
series: {0: {type: 'line'}}
Hope this helps other in the future!
as a kind of an answer to theGreenCabbage's question on the accepted answer:
So right now we added one more line to the candlestick. Could I add another set/column of line chart data on top of the existing?
function drawChart(data) {
if (data == null) return;
var formattedData = [];
for (var i = 0; i < data.length; i++) {
var rowItem = [data[i].date, data[i].low, data[i].open, data[i].close, data[i].high, data[i].line1, data[i].line2, data[i].line3];
formattedData.push(rowItem);
}
var dt = google.visualization.arrayToDataTable(formattedData, true);
var options = {
legend: 'none',
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
risingColor: { strokeWidth: 0, fill: '#0f9d58' } // green
},
chartArea: { left: 40, top: 20, width: '100%', height: '75%' },
seriesType: 'candlesticks',
series: { 1: { type: 'line' },
2: { type: 'line' },
3: { type: 'line' } },
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dt, options);
}
well, the main parts of this function in the context of the question are:
var rowItem = [data[i].date, data[i].low, data[i].open, data[i].close, data[i].high, data[i].line1, data[i].line2, data[i].line3];
and
series: { 1: { type: 'line' },
2: { type: 'line' },
3: { type: 'line' } },
all the other parts are simply for those who want to take in the CTRL+C / CTRL+V way