I'm trying to hide yAxis labels. I tried display: false property, but that didn't work.
My code below:
export const options = {
responsive: true,
interaction: { includeInvisible: true, intersect: false },
tooltip: {
backgroundColor: "rgba(0, 0, 0, 0.3)",
displayColors: false,
multiKeyBackground: "rgba(0, 0, 0, 0)",
},
scale: {
y1: {
min: 0,
ticks: {
count: 5,
},
grid: { borderDash: [3], color: "rgb(126,126,126)", tickLength: 0 },
},
y2: {
display: false,
position: "right",
max: Math.max(...BTCPrices.map((el) => el.Volume)) * 10,
ticks: {
count: 5,
},
},
x: {
ticks: {},
},
},
plugins: {
legend: {
display: false,
},
},
};
here's the image describing the problem:
Thanks for helping!
This is because your config is not getting picked up, you putted your scale config in the options.scale namespace white it needs to be configured in the options.scales so you need to add an extra s at the end
This is how I manage to get rid of the labels, I think in your case instead of Y its gonna be y2
y: {
ticks: {
display: false, //this will remove only the label
},
},
Related
I create some chart in dashboard using react-chart-js.
exmaple
but I have problem now chart not clear. I decided do change chart canvas size move mouse point over the chart . but i can't find solution for that.
i currently use "react-chartjs-2": "3.3.0" and "chart.js": "^3.6.0" packages
i use this option list for draw charts
const options = {
responsive: true,
animation: {
duration: 0,
},
plugins: {
legend: {
fullSize: false,
position: "bottom" as const,
labels: {
display: true,
},
},
title: {
display: true,
color: "white",
font: {
size: 14,
family: "tahoma",
weight: "normal",
style: "italic",
},
text: axis.thresholdValues.sensorName,
},
subtitle: {
display: true,
text: `average: x-axis: ${axis.average.x} y-axis: ${axis.average.y} z-axis: ${axis.average.z}`,
color: "white",
align: "end",
font: {
size: 12,
family: "tahoma",
weight: "normal",
style: "italic",
},
// padding: {
// bottom: 20,
// },
},
zoom: {
pan: {
// pan options and/or events
enabled: true,
speed: 0.01,
},
limits: {
// axis limits
},
zoom: {
// zoom options and/or events
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
speed: 0.01,
},
},
annotation: {
annotations: {
min: {
// type: 'line',
yMin: axis.thresholdValues.min,
yMax: axis.thresholdValues.min,
borderColor: "#D8D8D8",
// borderWidth: 2,
},
max: {
// type: 'line',
yMin: axis.thresholdValues.max,
yMax: axis.thresholdValues.max,
borderColor: "#DB00FF",
// borderWidth: 2,
},
},
},
tooltip: {
mode: "index",
intersect: false,
},
},
spanGaps: true,
datasets: {
line: {
pointRadius: 0, // disable for all `'line'` datasets
},
},
elements: {
point: {
radius: 0, // default to disabled in all datasets
},
},
transitions: {
zoom: {
animation: {
duration: 0,
},
},
},
scales: {
x: {
title: { display: true, text: "Time", align: "end" },
type: "time",
},
y: {
title: { display: true, text: "second", align: "top" },
},
},
events: ["click"],
hover: {
mode: "nearest",
intersect: false,
},
};
<Line data = {data} option = {option} />
Any one can suggest solution for it.
Expected:
enter image description here
Current:
enter image description here
I want to have stepsizes and gridlines in the same line and some padding
How can i achieve that with chart.js v3
scales: {
y: {
stacked: true,
grid: {
offset: true,
display: true,
drawBorder: false,
drawOnChartArea: true,
borderDashOffset: 25,
borderColor: "#d1d2db",
borderWidth: 0.8800000000000001,
color: "#d1d2db",
},
min: 0,
max: max,
ticks: {
// forces step size to be 25 units
stepSize: 25,
beginAtZero: true,
callback: callback,
max: max,
},
title: {
display: false,
text: "Y axis title",
},
},
x: {
grid: {
offset: true,
display: true,
drawBorder: false,
drawOnChartArea: false,
drawTicks: false,
tickLength: 0,
// borderDash: [0, 1],
// borderDashOffset: 0,
borderColor: "#d1d2db",
// borderWidth: 0.8800000000000001,
color: "#d1d2db",
},
},
},
Btw, is it also possible to have perpendiculars from data points to x-axis as shown in expected design ?
To have the horizontal grid lines aligned with the y labels, define options.scales.y.grid.offset: false or omit the option.
For the vertical lines from the bottom of the chart up to individual data points, you can use the Plugin Core API. In the afterDraw hook for example, you can draw the lines directly on the canvas using the CanvasRenderingContext2D.
Please take a look at your amended and runnable code and see how it works.
new Chart('chart', {
type: 'line',
plugins: [{
afterDraw: chart => {
var ctx = chart.ctx;
ctx.save();
var xAxis = chart.scales.x;
var yAxis = chart.scales.y;
const data = chart.data.datasets[0].data;
xAxis.ticks.forEach((v, i) => {
var x = xAxis.getPixelForTick(i);
var yTop = yAxis.getPixelForValue(data[i]);
ctx.strokeStyle = '#aaaaaa';
ctx.beginPath();
ctx.moveTo(x, yAxis.bottom);
ctx.lineTo(x, yTop);
ctx.stroke();
});
ctx.restore();
}
}],
data: {
labels: [1, 2, 3, 4, 5, 6, 7],
datasets: [{
label: 'My Data',
data: [65, 59, 80, 81, 56, 55, 68],
borderColor: '#0a0'
}]
},
options: {
scales: {
y: {
stacked: true,
grid: {
display: true,
drawBorder: false,
drawOnChartArea: true,
borderDashOffset: 25,
borderColor: "#d1d2db",
borderWidth: 0.8800000000000001,
color: "#d1d2db",
},
min: 0,
ticks: {
stepSize: 25,
beginAtZero: true,
},
title: {
display: false,
text: "Y axis title",
},
},
x: {
grid: {
offset: true,
display: true,
drawBorder: false,
drawOnChartArea: false,
drawTicks: false,
tickLength: 0,
borderColor: "#d1d2db",
color: "#d1d2db",
},
},
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<canvas id="chart" width="400" height="95"></canvas>
I am using react-chart-js2#3.3.0 with chart.js#3.6.2
When my dataset contains all 0s, the y-axis scales from -1 to 1 as such:
See Image
How do I make it start at 0 regardless? There seems to be a workaround for this: here and here but these solutions did not work for me. Basically, the workaround is to include a max in the ticks but it appears to just ignore it. I also tried upgrading to react-chart-js2#4 but for some reason it breaks so I reverted it back to 3.3.0.
Here is my options object:
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
layout: {
padding: 0,
},
scales: {
xAxes: [
{
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
padding: 18,
fontColor: theme.palette.text.secondary,
},
},
],
yAxes: [
{
gridLines: {
borderDash: [6],
borderDashOffset: [0],
display: false,
color: theme.palette.divider,
drawBorder: false,
zeroLineBorderDash: [6],
zeroLineBorderDashOffset: [0],
zeroLineColor: theme.palette.divider,
},
ticks: {
padding: 12,
fontColor: theme.palette.text.secondary,
beginAtZero: true,
min: 0,
max: 100,
},
},
],
},
tooltips: {
enabled: true,
mode: "nearest",
intersect: false,
caretSize: 6,
displayColors: false,
yPadding: 8,
xPadding: 16,
borderWidth: 4,
borderColor: theme.palette.common.black,
backgroundColor: theme.palette.common.black,
titleFontColor: theme.palette.common.white,
bodyFontColor: theme.palette.common.white,
footerFontColor: theme.palette.common.white,
callbacks: {
title: () => {},
label: (tooltipItem) => {
return `New Users: ${tooltipItem.yLabel}`;
},
},
},
};
the min and max have to be outside of the ticks:
y: { ticks: { }, min: 0, max: 100 }
I want to make a chart with min and max vertical lines and bars between them. I can't find information how to set bars' X coordinate or make custom line plot with vertical 'bars' instead of points.
And also I don't understand how to scale X axis, why MAX is left-side MIN? Min=22.5, Max=24.5
let plot_options = {
showScale: true,
pointDot: true,
showLines: true,
maintainAspectRatio: false,
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'y-axis-0',
value: min,
borderColor: 'red',
borderWidth: 2,
label: {
backgroundColor: 'red',
content: 'Min',
enabled: true,
},
},
{
type: 'line',
mode: 'vertical',
scaleID: 'y-axis-0',
value: max,
borderColor: 'red',
borderWidth: 2,
label: {
backgroundColor: 'red',
content: 'MAX',
enabled: true,
},
},
]
},
title: {
display: true,
text: plotHeader,
},
responsive: true,
legend: {
display: false,
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: labelx
},
ticks: {
min: min,
max: max
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: labely
},
ticks: {
beginAtZero: true,
},
}]
},
}
data = {
barPercentage: 0.5,
barThickness: 6,
maxBarThickness: 8,
minBarLength: 2,
labels: labels,
datasets: [{
data: values,
borderColor: BLUE,
backgroundColor: BLUE
}]
}
<Bar options={plot_options} data={data} plugins={ChartAnnotation} />
That's what I expect:
This solution is based on this answer for the positioning of the bars on a linear x-axis.
You can further use the Plugin Core API to draw the vertical min and max lines with their labels directly on the canvas. The API offers a number of hooks that can be used to perform custom code. In your case, you could use the afterDraw hook together with CanvasRenderingContext2D.
Please take a look at the runnable code below and see how it works. It should not be too hard to make similar code work with react-chartjs-2.
new Chart("chart", {
type: 'bar',
plugins: [{
afterDraw: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let xAxis = chart.scales['x-axis-0'];
let yAxis = chart.scales['y-axis-0'];
let dataset = chart.data.datasets[0];
[dataset.min, dataset.max].forEach((v, i) => {
var x = xAxis.getPixelForValue(+v * 1000);
ctx.fillStyle = 'red';
ctx.font = '14px Arial';
ctx.textAlign = 'center';
ctx.fillText(i == 0 ? 'Min' : 'Max', x, yAxis.top + 14);
ctx.fillStyle = 'gray';
ctx.font = '12px Arial';
ctx.fillText(v, x, yAxis.bottom + 20);
ctx.beginPath();
ctx.moveTo(x, yAxis.top + 20);
ctx.strokeStyle = 'red';
ctx.lineTo(x, yAxis.bottom + 3);
ctx.stroke();
});
ctx.restore();
}
}],
data: {
datasets: [{
min: 22.5,
max: 24.5,
data: [
{ x: '22.83', y: 18 },
{ x: '23.17', y: 15 },
{ x: '23.44', y: 13 },
{ x: '24.32', y: 20 }
],
borderColor: 'blue',
backgroundColor: 'blue',
barThickness: 20
}]
},
options: {
legend: {
display: false,
},
scales: {
xAxes: [{
offset: true,
type: 'time',
time: {
parser: 'X',
unit: 'millisecond',
displayFormats: {
millisecond: 'X'
}
},
ticks: {
source: 'data',
min: '22.5',
callback: (v, i, values) => values[i].value / 1000
},
gridLines: {
display: false
},
}],
yAxes: [{
ticks: {
beginAtZero: true,
max: 22,
stepSize: 2
}
}]
}
}
});
canvas {
max-width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id="chart" height="200"></canvas>
I have the following bar chart configuration.
const series = [
{
name: 'Net Profit',
data: [18, 34, 55, 57, 80, 70],
},
];
const options = {
chart: {
type: 'bar',
height: '50px',
toolbar: {
show: false,
},
},
grid: {
show: false,
padding: {
top: 0,
bottom: 0,
},
xaxis: {
lines: {
show: false,
},
},
yaxis: {
lines: {
show: false,
},
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '80%',
barHeight: '100%',
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: false,
width: 0,
colors: ['transparent'],
},
fill: {
opacity: 1,
colors: [
'#000000',
'#B32824',
'#1A73E8',
'#B32824',
'#1A73E8',
'#B32824',
],
type: 'solid',
},
tooltip: {
enabled: false,
},
xaxis: {
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
labels: {
show: false,
},
},
yaxis: {
axisTicks: {
show: false,
},
axisBorder: {
show: false,
},
labels: {
show: false,
},
},
};
I am getting extra padding at the bottom as below. how can I remove that?
If you don't want to show x-axis and y-axis in your chart, you can simply do
const options = {
chart: {
type: 'bar',
height: '250px',
sparkline: {
enabled: true
}
},
}
The sparkline option will remove all paddings/margins around the chart.
I was facing the same issue, and after reading the doc I found that you should set the value of parentHeightOffset as 0, something like this
var opt1 = {
chart: {
type: 'line',
height: 200,
...
parentHeightOffset: 0,
...
},
...
};