How can I change the size of each different dot in my scatter chart ?
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 15
}, {
x: 10,
y: 5,
}],
pointRadius: 15,
fill: false,
pointHoverRadius: 20
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
}]
}
}
});
After this I want to change each dot size in matter of my ajax response data.
I tried to do this without the star ofc:
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 15
}, {
x: 10,
y: 5,
pointRadius: 15,
*
}],
but with no success.
You should use a bubble chart that accepts the bubble radius in pixels (property r) for each data point.
Please take a look at this sample chart.
you can put each point in a separate series.
this will allow you to assign a separate radius.
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}],
pointRadius: 10,
fill: false,
pointHoverRadius: 20
}, {
label: 'hidden',
data: [{
x: 0,
y: 15,
}],
pointRadius: 20,
fill: false,
pointHoverRadius: 20
}, {
label: 'hidden',
data: [{
x: 10,
y: 5,
}],
pointRadius: 30,
fill: false,
pointHoverRadius: 20
}]
and to prevent multiple legend entries from being displayed,
we can filter out all but one series label.
legend: {
labels: {
filter: function(item, chart) {
return (item.text !== 'hidden');
}
}
},
see following working snippet...
$(document).ready(function() {
var scatterChart = new Chart(document.getElementById('chart').getContext('2d'), {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}],
pointRadius: 10,
fill: false,
pointHoverRadius: 20
}, {
label: 'hidden',
data: [{
x: 0,
y: 15,
}],
pointRadius: 20,
fill: false,
pointHoverRadius: 20
}, {
label: 'hidden',
data: [{
x: 10,
y: 5,
}],
pointRadius: 30,
fill: false,
pointHoverRadius: 20
}]
},
options: {
legend: {
labels: {
filter: function(item, chart) {
return (item.text !== 'hidden');
}
}
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>
I figured out you can specify an array of values for pointRadius & pointStyle properties :
datasets: [
{
label: "Plan",
data: [10, 15, 5],
pointRadius: [10, 5, 15],
pointStyle: ["rect", "rect", "circle"],
},
],
This way you can specify a size of each dot individually
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)
the version of Chart JS is 3.7.0
I am looking for a way to make my chart's points look from this:
to something like this:
I found out that there is an option in this library where you can set the points to a certain shape. e.x: pointStyle: 'rectRot' will make the points appearance look like this:
Is there an option or a way to achieve what Im looking for? (Check the second picture).
Thanks in advance!
My chart's javascript:
const data = {
datasets: [
{
backgroundColor: 'black',
borderColor: '#2d84b4',
borderWidth: 2,
data: [
{ x: 'Dec 27', y: 0.204 },
{ x: '01:00', y: 0.234 },
{ x: '02:00', y: 0.274 },
{ x: '03:00', y: 0.234 },
{ x: '04:00', y: 0.304 },
{ x: 'Dec 28', y: 0.506 },
],
fill: false,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: '#2d84b4',
pointHoverBorderColor: '#2d84b4',
},
],
};
const config = {
type: 'line',
data: data,
options: {
animation: {
duration: 0,
},
responsive: true,
maintainAspectRatio: false,
plugins: {
//Do not display legend.
legend: {
display: false,
},
},
scales: {
xAxes: {
stacked: true,
ticks: {
stepSize: 2,
},
grid: {
display: true,
drawBorder: false,
drawOnChartArea: false,
drawTicks: true,
tickLength: 4,
type: 'time',
},
},
yAxes: {
grid: {
drawBorder: false,
drawTicks: false,
},
},
},
elements: {
point: {
radius: 5,
},
},
},
};
// Initialize the Chart.
const myChart = new Chart(document.getElementById('myChart'), config);
window.addEventListener('beforeprint', () => {
myChart.resize(600, 600);
});
window.addEventListener('afterprint', () => {
myChart.resize();
});
//Disable all animations!
myChart.options.animation = false;
myChart.options.animations.colors = false;
myChart.options.animations.x = false;
myChart.options.transitions.active.animation.duration = 0;
The points seemed to work just fine with your transparent background, only on hover you setted a normal background again so the pointHoverBackgroundColor should also be transparent.
To make the point bigger on hover you can use the hoverRadius and to make the line have the same width you can use the pointHoverBorderWidth:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'black',
borderColor: '#2d84b4',
borderWidth: 2,
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBorderColor: '#2d84b4',
hoverRadius: 10,
pointHoverBorderWidth: 2
}]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>
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
}
}]
}
}
Problem: Hi all! i am using chart.js to draw the charts. chart is a dynamic sometimes shows 10 points and sometimes can be more than thousand i have applied a panel successfully so that my points can be shown at some distance to read them easily.
Right now i want to know if there is any option to set the distance between points in x-axis grid. right now it automatically adjust the points.
What i tried:
i tried to do the stepsize and scalewidth by searching other stackoverflow answers but did not succeed. Any kind of help would be much appreciated.
P.S: i m using chart.js2
This is my chartjs dataset
var data = {
labels: data.graph_date,
datasets: [
{
label: 'Assay Values',
fill: false,
lineTension: 0,
backgroundColor: "rgba(255, 0, 0,1)",
borderColor: "rgba(255, 0, 0,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderWidth: 1,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(255, 0, 0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(255, 0, 0,1)",
pointHoverBorderColor: "rgba(255, 0, 0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: data.assay_value,
spanGaps: false
},var options = {
responsive: false,
title: {
display: true,
position: "top",
text: label,
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var multistringText = ['Assay Value: '+tooltipItems.yLabel];
multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
return multistringText;
}
}
},
scales:{
yAxes:[{
ticks:{
min:graph_min
}
}],
xAxes: [{
gridLines: {
display:false
}
}]
}
};
if(new_chart[ctx.canvas.id] != null)
new_chart[ctx.canvas.id].destroy();
new_chart[ctx.canvas.id] =new Chart(ctx, {
type: 'line',
data: data,
options: options
});
In x-axis there is data like this
[19-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,22-Aug-2015,27-Aug-2015,29-Aug-2015,1-Sep-2015,2-Sep-2015,3-Sep-2015,]
in y-axis data is like this
[0.1,0.05,0.89,0.89,0.79,0.58,0.68,0.25,0.98]
The way to control distance between points it to set the X and Y axis with a min, max, and step size so that they never change regardless of the number of points that are in the chart.
Here is an example that sets the scales so that they will never change. Regardless of how many points appear on the chart everything will stay the same.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Points',
data: [
{x: 0, y: 2},
{x: 1, y: 3},
{x: 2, y: 2},
{x: 1.02, y: 0.4},
{x: 0, y: -1}
],
backgroundColor: 'rgba(123, 83, 252, 0.8)',
borderColor: 'rgba(33, 232, 234, 1)',
borderWidth: 1,
fill: false,
showLine: false,
}],
},
options: {
title: {
display: true,
text: 'Chart.js - Fixed X and Y Axis',
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: -1,
max: 8,
stepSize: 1,
fixedStepSize: 1,
}
}],
yAxes: [{
ticks: {
min: -2,
max: 4,
stepSize: 1,
fixedStepSize: 1,
}
}]
}
}
});
Here is a codepen example that demonstrates what this looks like
I'm trying to display a line chart on a webpage using Chart.js that shows the number of downloads in the apple store and google play store for a specific client for the past 5 days. The data appears properly, but does not properly label the X axis with this:
var downloadsChartData = {
labels: ["4 Days", "3 Days", "2 Days", "Yesterday", "Today"],
datasets: [{
label: "Google Play",
fill: false,
lineTension: 0,
backgroundColor: "rgba(0, 230, 115, 1)",
borderColor: "rgba(0, 230, 115, 1)",
borderCapStyle: 'butt',
borderJoinStyle: 'miter',
borderWidth: 2,
pointBorderColor: "rgba(150, 75, 75, 1)",
pointBorderWidth: 3,
pointRadius: 6,
pointHoverRadius: 9,
pointStyle: 'triangle',
data: [{
x: 1,
y: 2
}, {
x: 2,
y: 0
}, {
x: 3,
y: 3
}, {
x: 4,
y: 1
}, {
x: 5,
y: 1
}]
}, {
label: "iOS",
fill: false,
lineTension: 0,
backgroundColor: "rgba(26, 117, 255, 1)",
borderColor: "rgba(26, 117, 225, 1)",
borderCapStyle: 'butt',
borderJoinStyle: 'miter',
borderWidth: 2,
pointBorderColor: "rgba(150, 75, 75, 1)",
pointBorderWidth: 3,
pointRadius: 6,
pointHoverRadius: 9,
data: [{
x: 1,
y: 4
}, {
x: 2,
y: 2
}, {
x: 3,
y: 0
}, {
x: 4,
y: 1
}, {
x: 5,
y: 4
}]
}]
};
var downloadsChartOptions = {
title: {
display: true,
text: 'Downloads on Google Play and App Store',
fontSize: 30
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
abelString: 'Date',
fontSize: 20
},
type: 'linear',
position: 'bottom',
gridLines: {
display: false
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Downloads',
fontSize: 20
}
}]
}
};
var downloadsChart = document.getElementById('downloadsChart').getContext('2d');
new Chart(downloadsChart, {
type: 'line',
data: downloadsChartData,
options: downloadsChartOptions
});
I tried to switch the data field to an array of values so that Chart.js would recognize the labels I defined in downloadsChartData to:
...
pointStyle: 'triangle',
data: [2, 0, 3, 1, 1]
}]
...
pointHoverRadius: 9,
data: [4, 2, 0, 1, 4]
}]
However, when I make this change, the chart not only doesn't correctly label the X axes, but also stops displaying the data on the line chart entirely.
Can someone please spot what I'm doing incorrectly? The documentation isn't too helpful in this matter.
The documentation is not very clear on this point, but for graphing non-numerical data (such as your case where the X axis represents a Date) you cannot set the X axis to have a linear scale. In other words, if you set your axis with a linear scale, it will graph the numerical representation of the data (and therefore, not the label).
I removed type: 'linear' from your downloadsChartOptions and it solved the issue.:
var downloadsChartOptions = {
title: {
display: true,
text: 'Downloads on Google Play and App Store',
fontSize: 30
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Date',
fontSize: 20
},
//type: 'linear',
position: 'bottom',
gridLines: {
display: false
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Downloads',
fontSize: 20
}
}]
}
};