Related
["06月10日","06月13日","06月14日","06月15日","06月16日","06月17日","06月20日","06月21日","06月22日","06月23日","06月24日","06月27日","06月28日","06月29日","06月30日","07月01日","07月04日","07月05日","07月06日","07月07日","07月08日","07月11日","07月12日","07月13日","07月14日","07月15日","07月19日","07月20日","07月21日","07月22日","07月25日","07月26日","07月27日","07月28日","07月29日","08月01日","08月02日","08月03日","08月04日","08月05日","08月08日","08月09日","08月10日","08月12日","08月15日","08月16日","08月17日"]
above are all the labels that I want to show on the graph but it hiding all the odd index values from the graph only showing even index values on the graph from the above list.
see the graph it missing some labels.
if you see the order all the even number index values are displayed and odd are hidden..
This is all my chart code...
const data = {
labels: dates,
datasets: [{
type: 'line',
label: 'Line graph',
data: line,
fill: false,
borderColor: '#ff5252',
backgroundColor: '#ff5252',
yAxisID: 'y-axis-a',
lineTension: 0.1,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointRadius: 5,
pointHitRadius: 10,
},{
type: 'bar',
label: 'Bar graph',
data: diff,
borderColor: colors,
backgroundColor: colors,
borderWidth: 2,
pointRadius: 5,
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
fill: true,
showLabelBackdrop:true,
},]
};
const config = {
type:"scatter",
data: data,
options: {
legend: {
display: false
},
responsive: false,
scales: {
y: {
display:false,
beginAtZero: true,
ticks: {
color: "#ffffff",
font: {
size: 14,
},
},
},
},
plugins: {
labels: {
ticks:{
font: {
size: 22
},
color: "#ffffff",
}
},
title: {
display: true,
text: title,
padding: {
top: 10,
bottom: 30,
},
font: {
size: 22,
},
color: "#ffffff"
}
}
}
};
const ctx = document.querySelector(`#chart${index+1}`).getContext('2d');
const myChart = new Chart(ctx, config)
I have also tried..
x:{ticks:{autoSkip:false}}
when I do this it changes my label to numbers..
when you are using the type:"scatter",
Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties. The example below creates a scatter chart with 4 pointslink for charts scatter charts
when you are not defining the values with x and y then used the x-axis and y-axis as linear and then you can manipulate the x-axes for both line and bar..if you will not provide the chart_type in config it will take axes as linear
you can
xAxisID: 'x-axis-bar',
xAxisID: 'x-axis-line',
and then hide the 1 x-axis and autoSkip=False it will show your all values.
I am attaching the all code below..
const data = {
labels: dates,
datasets: [{
type: 'line',
label: 'Line graph',
data: line,
fill: false,
borderColor: '#ff5252',
backgroundColor: '#ff5252',
yAxisID: 'y-axis-a',
xAxisID: 'x-axis-line',
lineTension: 0.5,
order:1,
},{
type: 'bar',
label: 'Bar graph',
data: diff,
borderColor: colors,
backgroundColor: colors,
borderWidth: 2,
pointRadius: 5,
xAxisID: 'x-axis-bar',
pointBorderWidth: 1,
pointHoverRadius: 7,
pointHoverBorderWidth: 2,
fill: true,
showLabelBackdrop:true,
order:2
},]
};
const config = {
data: data,
options: {
responsive: false,
scales: {
y: {
display:false,
beginAtZero: true,
ticks: {
color: "#ffffff",
font: {
size: 14,
},
},
},
'x-axis-bar':{
ticks:{
autoSkip:false,
stepSize:1.0,
}
},
'x-axis-line':{
display:false
}
},
plugins: {
labels: {
ticks:{
font: {
size: 22
},
color: "#ffffff",
}
},
title: {
display: true,
text: title,
padding: {
top: 10,
bottom: 30,
},
font: {
size: 22,
},
color: "#ffffff"
}
}
}
};
const ctx = document.querySelector(`#chart${index+1}`).getContext('2d');
const myChart = new Chart(ctx, config)
I am using chartjs v3 (latest) and I'm trying to render a graph with multiple datasets that share one y axis.
Currently I have the following code:
const buff = await defaultChartRenderer({
type: 'line',
data: {
labels: data.value.filter(v => v.type === 'online').map(v => moment(new Date(v._time)).format(data.format)),
datasets: [
{
data: allOnline,
borderColor: '#43b581',
backgroundColor: 'rgba(0,0,0,0)',
label: 'Online',
normalized: true
},
{
data: allOffline,
borderColor: '#ff0000',
backgroundColor: 'rgba(0,0,0,0)',
label: 'Offline',
normalized: true
},
{
data: allIdle,
borderColor: '#faa61a',
backgroundColor: 'rgba(0,0,0,0)',
label: 'Idle',
normalized: true
},
{
data: allDnd,
borderColor: '#f04747',
backgroundColor: 'rgba(0,0,0,0)',
label: 'DND',
normalized: true
}
]
},
options: {
scales: {
y: {
suggestedMax: Math.max(...[...allOffline, ...allOnline, ...allDnd, ...allIdle]),
suggestedMin: Math.min(...[...allOffline, ...allOnline, ...allDnd, ...allIdle]),
stacked: true,
ticks: {
beginAtZero: false,
precision: 0,
},
gridLines: {
zeroLineColor: "rgba(255, 255, 255, 0.8)",
color: "rgba(255, 255, 255, 0.4)"
},
stacked: true,
id: 0,
position: 'left'
},
},
legend: {
//display: false,
labels: {
fontColor: 'white',
fontSize: 20
}
},
tooltips: {
enabled: false
}
}
})
The defaultChartRenderer function does not modify my input at all.
The following data gets passed in as allOnline, allOffline, allIdle, and allDnd:
[
2, 2, 3, 3,
3, 2, 2
] [
4, 4, 4, 3,
4, 4, 3
] [
1, 1, 1, 1,
0, 0, 1
] [
1.5, 1, 2, 2,
2, 2, 2
]
I would expect this to output a graph with that data, but instead only the allOnline data shows properly. Everything else gets moved upwards.
Current Output: https://imgur.com/a/prGiyxy
Am I doing something wrong? I've tried adding yAxisID to all of the datasets and sharing one id between all of them, but that didn't work. I've also tried without normalize: true.
To make it work as expected, remove the option scales.y.stacked or set it to false.
For further information, please consult the chapter Stacking from the Chart.js documentation.
UPDATE
stacked: true is defined twice on your y-axis. Remove both of them, and it should work.
I need to plot a single value in line chart. Currently i am using charts.JS library for line graph purpose.
The data will be varied some times i'll get the single data inside the data set at that time i need to plot the single value in the line chart.
I had tried with the charts.js annotation plugin but it didn't meet my requirements. which is like it wis overlapping the plotted point in the graph area.
My code
createLineChart() {
this.lineChart = new Chart(this.lineCanvas.nativeElement, {
type: "line",
data: {
labels:[],
datasets: [
{
fill: false,
backgroundColor: "#0168FF",
borderColor: "#0168FF",
pointBackgroundColor: "white", // wite point fill
pointBorderWidth: 1, // point border width
lineTension: 0,
pointBorderColor: "blue",
pointRadius: 4,
},
],
},
options: {
scales: {
yAxes: [
{
ticks: {
padding: 20,
beginAtZero: true,
min: 0,
stepSize: 100,
},
gridLines: {
drawBorder: false,
},
},
],
xAxes: [
{
// offset: true,
ticks: {
display: false,
//beginAtZero: true,
min: 0,
},
gridLines: {
zeroLineColor: "transparent",
drawBorder: false,
display: false,
},
//offset:true,
},
],
legend: {
display: false,
},
tooltips: {
enabled: false,
},
},
drawTime: "afterDraw", // (default)
} as ChartOptions,
// plugins: [ChartAnnotation]
},
});
}
To plot the data dynamically:
generateRandomDataSet(size) {
let yaxisArr = [];
let xaxisArr = [];
let random_data:any = this.getRandomData(size)
let maxYTickVal = Math.max.apply(Math, random_data.map((val) => {return val.yaxis}));
let maxVal = Math.ceil((maxYTickVal+1) / 10) * 10
for(let data of random_data) {
yaxisArr.push(data.yaxis)
xaxisArr.push(data.xaxis)
}
this.lineChart.data.datasets[0].data = yaxisArr
this.lineChart.config.data.labels = []
this.lineChart.config.data.labels = xaxisArr
this.lineChart.config.options.scales.yAxes[0].ticks.max =maxVal
this.lineChart.config.options.scales.yAxes[0].ticks.stepSize = maxVal/2
this.lineChart.update()
}
What i required
What i am getting
Thankyou.
There exists different approaches to solve this problem.
According to the answer I gave to a similar question, you can define an animation.onComplete function to draw the line.
In a comment on before mentioned answer, Lakshmansundeep suggested an approach where he defines the same data value three times but makes sure, pointRadius for the leading and ending data point is zero.
datasets: [{
data: [120, 120, 120],
...
pointRadius: [0, 4, 0],
pointHoverRadius: [0, 4, 0],
}],
For the second approach, please have a look at the code below.
new Chart('line-chart', {
type: "line",
data: {
labels: [null, 'A', null],
datasets: [{
data: [120, 120, 120],
fill: false,
backgroundColor: "#0168FF",
borderColor: "#0168FF",
pointBackgroundColor: "white",
pointBorderWidth: 1,
lineTension: 0,
pointBorderColor: "blue",
pointRadius: [0, 4, 0],
pointHoverRadius: [0, 4, 0],
}],
},
options: {
legend: {
display: false
},
tooltips: {
enabled: false
},
scales: {
yAxes: [{
ticks: {
padding: 20,
min: 0,
stepSize: 100
},
gridLines: {
drawBorder: false
}
}],
xAxes: [{
ticks: {
display: false
},
gridLines: {
zeroLineColor: "transparent",
drawBorder: false,
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>
I'm trying to add the ability to change a 'date' range for my chart, and I've added a button callback that changes the min value of the xAxes and then calls chart.update(), but the chart doesn't change.
I've tried manually entering a number, and unless it's a value in the data given for the table it won't update the graph.
this.analysisChart = new Chart(context, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: calculations.rollingTimestamps,
datasets: [
{
label: 'Cycle Times',
data: calculations.rollingCycleTimesXY,
borderColor: 'rgb(0,255,0,1)',
backgroundColor: 'rgb(0,255,0,0.5)',
type: 'scatter',
showLine: false,
labels: calculations.rollingAliases
},
{
label: 'Rolling μ',
borderColor: 'rgb(255, 99, 132, 1)',
backgroundColor: 'rgb(255, 99, 132, 0.5)',
data: calculations.rollingAverage,
fill: false,
pointRadius: 0
},
{
label: 'Overall μ',
data: calculations.overallAverageArr,
fill: false,
borderColor: 'rgb(0,0,0,1)',
backgroundColor: 'rgb(0,0,0,0.5)',
pointRadius: 0,
showLine: true
},
{
label: 'μ + σ',
data: calculations.rollingMaxStandardDeviation,
fill: 4,
backgroundColor: 'rgb(50,50,255,0.35)',
borderColor: 'rgb(50,50,255,0)',
pointRadius: 0,
showLine: true
},
{
label: 'μ - σ',
data: calculations.rollingMinStandardDeviation,
fill: 3,
backgroundColor: 'rgb(50,50,255,0.35)',
borderColor: 'rgb(50,50,255,0)',
pointRadius: 0,
showLine: true
},
{
label: 'μ + 2 * σ',
data: calculations.rollingMaxSecondStandardDeviation,
fill: 3,
backgroundColor: 'rgb(50,50,255,0.3)',
borderColor: 'rgb(50,50,255,0)',
pointRadius: 0,
showLine: true
},
{
label: 'μ - 2 * σ',
data: calculations.rollingMinSecondStandardDeviation,
fill: 4,
backgroundColor: 'rgb(50,50,255,0.3)',
borderColor: 'rgb(50,50,255,0)',
pointRadius: 0,
showLine: true
}
]
},
// Configuration options go here
options: {
layout: {
padding: {
left: 20,
right: 20,
top: 0,
bottom: 0
}
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 10) / 10;
return label + " days";
}
}
},
hover: {
mode: 'index',
intersect: false
},
scales: {
yAxes: [{
ticks: {
min: 0,
type: 'linear',
callback: function(label, index, labels) {
return label + " days";
}
}
}],
xAxes: [{
ticks: {
type: 'linear',
min: 0,
callback: function(label, index, labels) {
return new Date(label).toDateString();
}
}
}]
},
title: {
display: true,
text: 'Cycle Times'
}
}
});
What I'd like to do is give an arbitrary number and have it perform a greater than check across the data for determining what to cut off rather than doing a find and then cutting anything off that is after that index in the array.
How can I do this?
As a solution, I just wrote a function to iterate through the array and find the first value that is greater than or equal to the value I wanted and then set the min of the xAxes to that value. Not very ideal, but hey at least it works.
I couldn't find anything in the documentation about callbacks for the min value.
I am trying to make a chart with multiple lines and bars but they need to start at 0 and it works fine for the bar's but not one the lines.
I tried setting a id for the options setting options in the dataset but nothings works
Here is my code:
<canvas id="barLine" width="400" height="400"></canvas>
#section('js')
#parent
<script>
var ctx = document.getElementById("barLine");
new Chart(ctx, {
type: 'bar',
data: {
labels: ['contacten', 'orders', 'logistiek'],
datasets: [{
label: 'Aantal',
data: [5.3, 5.5, 5.7],
backgroundColor: colors,
borderColor: colors,
borderWidth: 1
}, {
label: 'Aantal',
data: [5.7, 6.5, 6],
backgroundColor: colors,
borderColor: colors,
borderWidth: 1
}, {
label: 'Aantal',
data: [7.8, 5, 7],
backgroundColor: colors,
borderColor: colors,
borderWidth: 1
}, {
label: 'Target 2016',
data: [5.0, 5.0, 5.0],
type: 'line',
fill: false,
pointHitRadius: 10,
pointRadius: 0,
pointStyle: 'rect'
}, {
label: 'Target 2017',
data: [7.5, 7.5, 7.5],
type: 'line',
fill: false,
pointHitRadius: 10,
pointRadius: 0,
pointStyle: 'rect'
}, {
label: 'Target 2018',
data: [7, 7, 7],
type: 'line',
fill: false,
pointHitRadius: 10,
pointRadius: 0,
pointStyle: 'rect',
backgroundColor:'purple',
borderColor:'purple',
beginAtZero:true
}]
},
options: {
scales: {
yAxes: [{
ticks: {
max: 10,
min: 0
},
scaleLabel: {
display: true,
labelString: "Cijfer"
}
}]
}
}
});
</script>
#stop
So it needs to work that the lines (target 2016......) need to start at 0. I can make it work with just a line but with mixed I cannot make it so.
beginAtZero is an attribute of ticks so you need to put it inside ticks, which is part of options:
options:{
scales:{
yAxes:[{
ticks:{
beginAtZero: true
}
}]
}
}