I'm using Chartjs and Angular(angular-chart.js) and I need a way to show my graphs in a better way. My graphs have data with too much variation:
Graph image
There are any way I can group some Ticks of the graph? Like the interval of 200 - 400 with just one Tick. Or there are any other way to deal with it?
Can you create the plunkr to reproduce this issue or you can try this,
Linear Scale config
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
max: 5,
min: 0,
stepSize: 0.5
}
}]
}
}
});
Related
I am making a chart displaying stock data using ChartJs (react-chartjs-2). I have a datapoint for every minute from 9:30am to 3:59pm. When I plot it, my chart looks like the image below. The points don't even remotely align with the grid. The point in the image says 10:16 but the chart positions it between 9 and 10. Why is it like this? The points should also start halfway after the 9 tick since my data starts at 9:30. Does anyone know what I can do to resolve this?
My data is in the format like x = 2023-02-15 09:30:00-05:00 and y = 226.145. I have an option that truncates what is displayed on the tick so instead of displaying the entire datetime format, it only displays the hour.
Here is some of my code:
const data = {
labels: Object.keys(stockdata),
datasets: [
{
data: Object.values(stockdata),
borderColor: "rgba(75,192,192,1)",
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
pointRadius: 0,
scales: {
x: {
ticks: {
callback: function (val) {
const time = parseInt(
this.getLabelForValue(val).split(" ")[1].split(":")[0] % 12
);
return time == 0 ? 12 : time;
},
maxTicksLimit: 7,
},
grid: {
color: "#303030",
},
},
y: {
grid: {
color: "#303030",
},
},
},
};
React component render:
<Line data={data} options={options} />
I assume the issue is, that your localtime has a date offset off -1 hours, but without seeing the data (and knowing the offset), I can't say for sure.
If this would be the case, you could/would have to convert your dataset values. Depending on your dataset and available libraries you could use functions like:
momentjs:
let localDate= moment.utc("2023-02-01 10:00:00")
.local()
.format("YYYY-MM-DD HH:mm:ss");
vanilajs:
let localDate = new Date(Date.UTC(2023, 1, 1, 10, 0, 0));
You would have to loop through all the x-values / dates entries, to fix this.
I am working with a line chart I am trying to get the dates to show on the x axis. It should be shown monthly. I am getting two months to show up but not 3. The first month (august) is not displaying on the x axis yet there is data plotted. Can someone help me?
This is the time_stamp being passed through.
its better you provide a sample in codesandbox, or maybe try this:
xAxes: [{
ticks: {
autoSkip: true,
maxTicksLimit: 5
},
scaleLabel: {
display: true,
labelString:[ `Issues: ${yAxisCreatedIssues.length} created and ${resolvedNumber.length} resolved. Period: last 90 days (grouped daily)`] ,
},
type: 'time',
time: {
parser: 'YYYY-MM-DD',
unit: 'month',
displayFormats: { month: 'MMM-YYYY'}
}
},
],
After an initial load of a chart I want to append Annotations on the go by updating the chart.
Currently I have an update function which append data to the chart:
const chart = this.chart.getChart();
const serie = this.getSerie();
chart.series[0].setData(serie.list);
Is there a way where I can append Annotations in a similar way?
At the moment I insert annotations into the initial chart config:
annotations: [{
xAxis: 0,
yAxis: 0,
xValue:1515571888000.3572,
yValue: 200,
anchorX: 'left',
anchorY: 'top',
title: 'Annotation text',
}]
But i'm interested in being able to add annotations as I update the chart.
Currently i'm using react-highcharts v. ^11.0.0 from npm.
Refer to this live demo: http://jsfiddle.net/kkulig/gxv5f3xn/
You can use Chart.removeAnnotation() and Chart.addAnnotation() to perform dynamic updates (Chart.update() won't work). These methods are not docummented in the API yet.
annotations: [{
id: 'anno1',
labels: [{
point: 'first',
format: '1'
}, {
point: 'second',
format: '2'
}]
}]
(...)
chart.removeAnnotation('anno1');
chart.addAnnotation({
id: 'anno2',
labels: [{
point: 'first',
format: '3'
}, {
point: 'second',
format: '4'
}]
});
When the series is being hidden via legend item click the error occurs - it's a bug (the official fix for it should be implemented soon). To prevent this error from happening I used modified core functions (lines 1 - 39 in the demo).
I am new to the highcharts. I am using donut highchart where in the below provided link we can get the static data
http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-pie-donut/
But i have a no. of data in the same format as
Highcharts.chart('container5',{
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Daily Report'
},
subtitle: {
text: '3D donut'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Amount',
data: [$rootScope.oprep2]
}]
})
Here $rootScope.oprep2 is the data which in the array format as per the format shown / given in the demo as
in the above picture you can the line number 1025 which is in the required format.
the above pic shows the open array which contains data as unitno and amountpaid
My Query is, that the data is not displaying in the chart. So any idea, which will help me a lot. Here is the view as daily report
Here is my data
Array[11] =>
Array[2]=>
0:"001"
1:180
Array[2]=>
0:"007"
1:4570
Array[2]=>
0:"008"
1:1060
Array[2]=>
0:"026"
1:180
Each array is seperated by ,
As i have gone through your code, i see that your getting array of array, but you are assigning that data again with array which is not getting the chart. Instead of joining, separation, try to remove the array assign it directly.
data:$rootScope.oprep2
but not
data:[$rootScope.oprep2]
Am very new to sencha touch as my requirement is to get the bar with four color gradients. but as of now am possible to apply only two color gradients for the bar .
following is my code,
gradients:
[ {
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: '#79bbff'
},
100: {
color: '#0d55a9'
}
}
}]
series:
[ {
type: 'bar',
renderer: function(sprite, storeItem, barAttr, i, store11) {
barAttr.fill = colors[i % colors.length];
return barAttr;
}
}]
Is it possible to apply more than two gradients for the single bar.Please help me regarding this.
Thanks in advance,
Naga
bug in the current release of sencha touch .... have posted a patch here
http://www.sencha.com/forum/showthread.php?162233-Bug-Fix-Charts-1.-Could-not-apply-gt-2-stops-to-gradient-and-angle-not-respected&p=692723#post692723