I have the following Line chart with two datasets that share the same x-axis labels. I'd like to know if is it possible to hide one of them but keep the labels (e.g. from 100 to 500) on the right y-axis.
My intent is two show just one line that references to two different values (the left one from -800 to 800 and the right one from 100 to 500) for instance.
UPDATE:
I don't know if this is the right way of doing it. In an ideal world I have to show on the same label two different values on y-axis. So maybe there's a better way to show this using just one dataset with two datapoints anchored to the different y-axis.
I'm currently exploiting https://github.com/reactchartjs/react-chartjs-2
You can add a second axis, specify a min and max so that even when you hide the dataset the ticks stay:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange',
yAxisID: 'secondY'
}
]
},
options: {
scales: {
y: {
display: true,
min: 2,
max: 20
},
secondY: {
position: 'right',
display: true,
min: 3,
max: 11
}
}
}
}
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>
Related
Is there anyway to remove this overflowing section of the gridlines?
This is exactly what I'm looking for:
I've seen a few post from years ago with this question and none of them have really yielded any results. Those were so long ago that I pray that a fix has happened since then.
Cheers!
You can set tickLength to 0 in the grid options. To make the ticks still appear a bit away from the scale you can use the padding option:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
scales: {
y: {
ticks: {
padding: 4,
crossAlign: 'far'
},
grid: {
tickLength: 0
}
},
x: {
grid: {
tickLength: 0
}
}
}
}
}
const 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.1/chart.js"></script>
</body>
I have a radar chart and I'd like to display the value for the tick at the center of the chart over the center. My r scale is set up as follows, and my data is an integer ranging from 1-5.
scales: {
r: {
min: 1,
max: 5,
ticks: {
stepSize: 1,
z: 10,
},
},
},
Over the center of the radar chart, I'd like the tick value displayed, like it's displayed for all other values. Setting my min to 0 (one step size lower than my actual min) displays my ticks, but I'd like the center of my graph to be labeled instead of having a minimum size between the center and the first tick.
You will need to use a custom plugin to draw it on the canvas yourself like so:
const options = {
type: 'radar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
plugins: {
centerTick: {
//color: 'grey' // Set custom color for y
}
}
},
plugins: [{
id: 'centerTick',
afterDraw: (chart, args, opts) => {
const {
ctx
} = chart;
ctx.fillStyle = opts.color || Chart.defaults.color;
ctx.fillText(chart.scales.r.min, chart.scales.r.xCenter - (ctx.measureText(chart.scales.r.min).width / 2), chart.scales.r.yCenter)
}
}]
}
const 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'm using chartjs 2, and I'm trying to disable the grid lines on xAxis and enable grid lines on yAxis and make them dashed.
I have achieved this functionality by adding this to my Line graph config;
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
}
}],
yAxes: [{
display: true,
gridLines: {
display: true,
borderDash: [2],
borderDashOffset: [2],
color: 'rgba(0, 0, 0, 0.04)',
drawBorder: false,
drawTicks: false,
}
}]
}
However, when I do this, it randomly adds another axis to my chart with completely bogus values. I want to remove this axis and keep the original but also keep the gridLines config.
You can set the defaults for this. You can set it in the scale default so it does it for all the chart types and scales. If you specifically want to hide the X axis gridLines only you need to set it on chart type level.
Chart.defaults.scale.gridLines.display = false // hides all the gridLines in all charts for all axes
Chart.defaults.line.scales.xAxes[0].gridLines = {
display: false
} // Hides only the X axes gridLines in all line charts
var options = {
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
}
}]
}
}
}
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/2.9.4/Chart.js"></script>
</body>
I'm using ChartJs to present some graphs for the progress of an athlete in weightlifting.
In x-axis I have dates of training and in y-axis I have kilograms of different exercises (5 lines).
Although not all exercises are done in one training date. So for this specific date my line for the exercise goes to zero (when I'm not finding the exercise in training, I'm putting 0 in my data json for the chart).
Is there a solution for this specific date the dot of this line to be removed totally and avoid my line to goes to zero ? When I have no data => don't show any dot.
For example as you can see the point of orange at 27/06/2021 the blue exercise does not exist at all. I want avoid the drop of the line to zero.
Labels and Data is something like that
data: [65, 59, 80, 81, 56, 55, 40]
labels: ["20/01/2020", "21/01/2020" ..... ]
.
Yes, you can use scriptable options if you want the dot to not show, you can also pass null values so the point gets skipped or you can use the object format to specify to which labels the datapoint needs to be matched:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Scriptable radius',
data: [12, 19, 0, 5, 2, 3],
borderColor: 'pink',
backgroundColor: 'pink',
radius: (ctx, a, b) => (ctx.parsed.y === 0 ? 0 : 8)
},
{
label: 'Null value',
data: [7, 11, null, 8, 3, 7],
borderColor: 'orange',
backgroundColor: 'orange'
},
{
label: 'Object notation',
data: [{
x: 'Red',
y: 6
}, {
x: 'Blue',
y: 4
}, {
x: 'Green',
y: 8
}, {
x: 'Purple',
y: 12
}, {
x: 'Orange',
y: 3
}, ],
borderColor: 'lime',
backgroundColor: 'lime'
}
]
},
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.5.1/chart.js"></script>
</body>
In Chartjs, is there any way to shift the line plot to the right 1 tick? Right now the line starts from the y-axis and as the result at the origin, there are labels from both x and y axis that does not look that nice. I attach the screenshot
Ideally I would like the 09-2016 to move to the right a litte. Really appreciate any help.
You can add an empty label and to the start of the labels array and a null value to the start of your dataArray to shift it a bit
Example:
var options = {
type: 'line',
data: {
labels: ["", "Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [null, 12, 19, 3, 5, 2, 3],
borderWidth: 1,
fill: false,
borderColor: 'red',
backgroundColor: 'red'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
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/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>