I have a bit of a unique chart.js issue here whereas I'm attempting to plot points on a linear chart on a single X axis only. For a visual reference, this chart would look like a vertical line with multiple Y values on a single X value. So far I cannot get the charts.js scipt to not automatically space values across the width of the chart at 100%, even with all X values declared at 0. I've got the sample data set with basic filler with a 0 X Value for each in the following.
<script>
var chart = new Chart(linechart, {
type: 'line',
options: {
scales: {
xAxes: [{
gridLines: {
},
ticks: {
suggestedMin: 0,
},
}],
yAxes: [{
gridLines: {
},
ticks: {
suggestedMin: 0,
suggestedMax: 12,
stepSize: 0.5
},
}]
},
legend: {
}
},
data: {
datasets: [{
data: [{x: 0, y: 12}, {x: 0, y: 11}, {x: 0, y: 10}],
pointBackgroundColor: "rgba(193,46,12,0.5)",
pointBordercolor: "rgba(193,46,12,1)",
pointRadius: 5,
fill: true,
showLine: false
}]
}
});
</script>
The issue here is that the x-axis default type of a line chart is category. To turn this into linear, simply add type: 'linear' to the x-axis as follows:
options: {
scales: {
xAxes: [{
type: 'linear',
...
Please take a look at your amended code below and see how it works.
new Chart('myChart', {
type: 'line',
data: {
datasets: [{
label: 'Dataset',
data: [{ x: 0, y: 12 }, { x: 0, y: 11 }, { x: 0, y: 10 }],
pointBackgroundColor: "rgba(193,46,12,0.5)",
pointBordercolor: "rgba(193,46,12,1)",
pointRadius: 5,
fill: false,
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
gridLines: {},
ticks: {
suggestedMin: 0,
}
}],
yAxes: [{
gridLines: {},
ticks: {
suggestedMin: 0,
suggestedMax: 12,
stepSize: 0.5
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>
Related
What I want to do is to get a position for x axis but I found out I can't get it unless the x axis has the exact same value. But for y axis, I can get position for a value as long as the value is in range of y axis.
Is there a way to get a coordinate for a value in x axis? X axis's labels are numbers and each label has an equal step between the next one.
My current code is like this.
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
data() {
return {
chartdata: {
labels: [
10, 20, 30, 40, 50, 60, 70, 80, 90, 100,
],
datasets: [
{
label: '',
data: [
34, 56, 78, 12, 45, 67, 12, 89, 93, 43,
],
type: 'line',
borderColor: 'red',
fill: false,
lineTension: 0,
}
],
},
options: {
responsive: true,
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'x',
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 10,
suggestedMax: 100,
},
scaleLabel: {
display: true,
labelString: 'y',
}
}],
}
}
}
},
mounted() {
this.addPlugin({
beforeDraw: (chart) => {
console.log(chart.scales['y-axis-0'].getPixelForValue(23.56)); // Can get a coordinate in canvas
console.log(chart.scales['x-axis-0'].getPixelForValue(36.98)); // The coordinate I get is out of canvas
console.log(chart.scales['x-axis-0'].getPixelForValue(40)); // Can get a coordinate in canvas because label has the same value (40)
}
});
this.renderChart(this.chartdata, this.options);
}
}
</script>
When the data is an array of numbers, the x-axis is generally a category. The points are placed onto the axis using their position in the array, which should also match a value from labels.
Yo need to change the x-axis into linear type in order to obtain correct values from the function getPixelForValue.
Don't define labels
Define the data as an array of points using objects containing x and y properties each.
Add type: 'linear' to the xAxes option
Please take a look at your amended code and see how it works.
new Chart("chart", {
type: 'line',
plugins: [{
beforeDraw: (chart) => {
console.log(chart.scales['y-axis-0'].getPixelForValue(23.56));
console.log(chart.scales['x-axis-0'].getPixelForValue(36.98));
console.log(chart.scales['x-axis-0'].getPixelForValue(40));
}
}],
data: {
datasets: [{
label: '',
data: [
{ x: 10, y:34 },
{ x: 20, y:56 },
{ x: 30, y:78 },
{ x: 40, y:12 },
{ x: 50, y:45 },
{ x: 60, y:67 },
{ x: 70, y:12 },
{ x: 80, y:89 },
{ x: 90, y:93 },
{ x: 100, y:43 }],
type: 'line',
borderColor: 'red',
fill: false,
lineTension: 0,
}],
},
options: {
responsive: true,
scales: {
xAxes: [{
type: 'linear',
scaleLabel: {
display: true,
labelString: 'x',
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 10,
suggestedMax: 100,
},
scaleLabel: {
display: true,
labelString: 'y',
}
}],
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="200"></canvas>
I am using chart.js to create some charts, and I need to make line chart that have multiple entries for the same point in the X axes.
In other words, this:
Whatever I try, i can not create it to look like the image.
Dose anyone know how I can manage this (with plugins or without)?
This can be done with a scatter graph, the data has to be an array of objects with x and y, also you can adjust the tension of the line.
var data = {
datasets: [{
label: "Dataset #1",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [{
x: 0,
y: 5
},
{
x: 1,
y: 10
},
{
x: 1,
y: 5
},
{
x: 3,
y: 10
}]
}]
};
var option = {
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}]
},
elements: {
line: {
tension: .1, // bezier curves
}
}
};
Chart.Scatter('chart_0', {
options: option,
data: data
});
[Codepen]https://codepen.io/devil-geek/pen/KrQWBP
I'm using Chart.js to draw the line chart with 6 points. That points are:
x: 140, y: null,
x: 150.5, y: 3500,
x: 886.35, y: 3500,
x: 1617.2, y: 0,
x: 2348.05, y: 0
x: 2583, y: null
As one can see, the intervals between x0 and x1 (and also x4-x5) are much smaller than x1-x2-x3-x4. But on the chart they are being drawn like they are equal:
I would rather expect, that the gap between x0 and x1 will be much shorter than between x1 and x2. Can it be done some way?
Code snippet:
var chart = new Chart(document.getElementById("myChart1"), {
type: 'line',
data: {
labels: [140, 155.5, 886.35, 1617.2, 2348.05, 2583],
datasets: [{
label: 'My chart',
spanGaps: true,
lineTension: 0,
data: [{
x: 140,
y: null
},
{
x: 155.5,
y: 3500
},
{
x: 886.35,
y: 3500
},
{
x: 1617.2,
y: 0
},
{
x: 2348.05,
y: 0
},
{
x: 2583,
y: null
}
],
fill: false,
borderColor: '#4bc0c0'
}]
},
options: {
showXLabels: 30,
legend: {
display: false
},
tooltips: {
enabled: true,
},
scales: {
yAxes: [{
scaleLabel: {
display: true
},
ticks: {
suggestedMin: 0,
suggestedMax: 3700
}
}],
xAxes: [{
scaleLabel: {
display: true,
},
ticks: {
autoSkip: true,
maxTicksLimit: 10
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart1"></canvas>
Just add type: 'linear' to the xAxes object, like this:
xAxes: [{
type: 'linear',
scaleLabel: { ...
Your first point has y:null and it won't be included on the chart. I changed it to x:140,y:0.
try{
var chart = new Chart(document.getElementById("my_chart"), {
type: 'line',
data: {
labels: [140, 155.5, 886.35, 1617.2, 2348.05, 2583],
datasets: [{
label: 'My chart',
spanGaps: false,
lineTension: 0,
data: [{
x: 140,
y: 0
},
{
x: 155.5,
y: 3500
},
{
x: 886.35,
y: 3500
},
{
x: 1617.2,
y: 0
},
{
x: 2348.05,
y: 0
},
{
x: 2583,
y: null
}
],
fill: false,
borderColor: '#4bc0c0'
}]
},
options: {
showXLabels: 30,
legend: {
display: false
},
tooltips: {
enabled: true,
},
scales: {
yAxes: [{
scaleLabel: {
display: true
},
ticks: {
suggestedMin: 0,
suggestedMax: 3700
}
}],
xAxes: [{
type: 'linear', /* <--- this */
scaleLabel: {
display: true,
},
ticks: {
autoSkip: true,
maxTicksLimit: 10
}
}]
}
}
});
}catch(e){}
body { m1argin-bottom: -30px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="my_chart"></canvas>
I created a simple line chart using chart.js with 3 Y axes:
https://codepen.io/anon/pen/dZVgKw
As you can see, the last one is going from 10 to 20 without any number between. How can I set step size here?
This is how I add an axe:
{
id: 'C',
type: 'linear',
position: 'left',
ticks: {
max: 10,
min: 20,
},
}
Thanks.
How can I set step size here?
Straight from the samples (Linear Scale, step size):
By setting a stepSize value.
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
},
ticks: {
min: 0,
max: 100,
// forces step size to be 5 units
stepSize: 5 // <----- This prop sets the stepSize
}
}]
}
Here's a live example:
var ctx = document.getElementById('chartJSContainer').getContext('2d')
new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false,
stepSize: 3
},
}]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
this.data = {
labels: Xaxis,
datasets: [
{
label: "Primary",
data:Primyaxis,
type: 'line',
borderColor:'#eddb1c',
backgroundColor:'#FFF3D6',
fill: false,
pointBorderColor: 'yellow',
pointBackgroundColor: 'yellow',
borderWidth: 1.5
},
{
label: "Secondary",
data: Secyaxis,
type: 'line',
borderColor:'#FF7A96',
backgroundColor:'#EAC3CC',
fill: false,
pointBorderColor: 'red',
pointBackgroundColor: 'red'
}
]
};
this.options = {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Extra Distance Interval From Origin'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Percentage of Employees'
},
ticks: {
// min: 50,
max: 100,
// forces step size to be 5 units
stepSize: 2 // <----- This prop sets the stepSize
}
}]
},
pan: {
enabled: true,
},
zoom: {
enabled: true,
},
responsive: true,
}}
I have a dataset which has around 60 x-axis labels. My line chart is not displaying all the labels in my x-axis.
var ctx = this.refs.basicXYChart;
var config = {
type: 'line',
data: {
xLabels: Object.keys(result),
yLabels: Object.values(result),
datasets: [{
label: this.state.report.definition.name,
data: Object.values(result),
backgroundColor: 'rgba(154, 208, 245, 0.5)',
borderWidth: 1,
pointStyle: 'circle',
pointBackgroundColor: 'rgb(77, 172, 237)',
pointRadius: 5,
pointHoverRadius: 10,
borderWidth: 1,
borderColor: '#000000'
}]
},
options: {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: this.props.X_label
}
}],
yAxes: [{
position: 'left',
display: true,
scaleLabel: {
display: true,
labelString: this.props.Y_label
}
}]
}
}
};
if(y_type == 'category'){
config.options.scales.yAxes[0]['type'] = 'category';
}
var myChart = new Chart(ctx, config);
I also want to start the y-axis from 0
This is addressed in https://github.com/chartjs/Chart.js/issues/2801.
scales: {
xAxes: [{
ticks: {
autoSkip: false
}
}]
}
Which can be found in the documentation here: http://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration