I drew a line chart and want to move x axis tick marks position, but I can not find related configuration. Please see the picture below.
AS-IS/TO-BE
Here is my code
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js">
<canvas id="myChart" style="height:500px"></canvas>
chart = new Chart(document.getElementById("myChart"), {
type: 'line',
data: {
datasets: [{
label: "Count",
pointStyle: 'circle',
showLine: true,
fill: false,
lineTension: 0,
borderColor: '#7265ce',
pointRadius: 4,
pointBorderWidth: 1,
pointBackgroundColor: '#7265ce',
data: data
}]
},
options: {
parsing: {
xAxisKey: 'timestamp',
yAxisKey: 'value'
},
spanGaps: false,
responsive: false,
scales: {
x: {
bounds: 'ticks',
type: 'time',
time: {
parser: 'yyyyMMddHHmmss',
unit: 'minute',
stepSize: 5,
displayFormats: {
minute: 'HH:mm',
second: 'mm:ss'
}
},
title: {
display: false,
text: 'Timestamp'
},
grid: {
drawOnChartArea: false,
lineWidth: 1
},
ticks: {
display: true,
color: '#cecece'
}
},
y: {
type: 'linear',
display: true,
ticks: {
padding: 10,
autoSkip: true,
maxTicksLimit:2,
color: '#cecece'
},
title: {
display: false,
text: 'Count',
align: 'end'
},
grid: {
drawOnChartArea: false
},
}
}
}
});
});
let data = [
{ "timestamp": "20230109150000", "value": 10 },
{ "timestamp": "20230109150100", "value": 17 },
{ "timestamp": "20230109150200", "value": 92 },
{ "timestamp": "20230109150300", "value": 60 },
{ "timestamp": "20230109150400", "value": 50 },
{ "timestamp": "20230109150500", "value": 91 }
];
Is it possible?
Is there any configuration in chartjs?
I'm using v3.9.1
Sorry for my poor english.
Related
chart error
I have an issue while using chart.js.
I set initial data to show on chart. (from 0 index to 15 index of data),
the datalabel of line chart is over the X-Axis after drawing chart.
Here is my code.
<Chart
type="bar"
height={500}
options={{
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x',
threshold: 10,
},
zoom: {
wheel: {
enabled: true,
speed: 0.3,
},
pinch: {
enabled: true,
},
mode: 'x',
},
},
},
maintainAspectRatio: false,
responsive: true,
layout: {
padding: 10,
},
scales: {
xAxis: {
stacked: true,
min: 0,
max: 15,
},
yAxis: {
stacked: true,
beginAtZero: true,
title: {
display: true,
},
ticks: {
maxTicksLimit: 10,
},
min: 0,
afterDataLimits: scale => {
scale.max = scale.max * 1.2;
},
},
},
}}
data={{
labels: xAxisNameList, // ex : ['2023.01.25', '2023.01.26']
datasets: dataSetList, //
}}
/>
And This is my data set list.
const dataSetList: any[] = [
{
data: data,
datalabels: {
align: 'end',
anchor: 'start',
display: true,
},
},
{
label: `...`,
data: data,
parsing: {
yAxisKey: `...`,
},
datalabels: {
anchor: 'end',
align: 'start',
clamp: true,
display: true,
},
},
];
And here is my package.json
"chart.js": "^3.9.1",
"chartjs-plugin-datalabels": "^2.2.0",
"chartjs-plugin-zoom": "^2.0.0",
"react-chartjs-2": "^4.3.1"
I want to datalabels inside chart graph Whenever I zoom or pan this chart.
I want to make side labels for double horizontal bar on both side like this: pic 1, pic 2
can someone help me idk how to do it, im new in react and chartjs
this post continued from: How to make multiple horizontal bar chartjs
here's what i code:
this the data:
data for chart
export const dataPasienKeluarMasuk = {
type: 'bar',
labels: [
[0, 1, 2, 3,4], // expect output 0 - 4
[5, 6, 7, 8, 9], // expect output 5 - 9
[10, 14], // ext..
[15, 19],
[20, 24],
[25, 29],
[30, 34],
],
datasets: [
{
label: 'Pasien Masuk',
xAxisID: 'A',
data: [100, 90, 80, 70, 60],
backgroundColor: 'red',
},
{
label: 'Pasien Keluar',
xAxisID: 'A',
data: [-100, -90, -80, -70, -60],
backgroundColor: 'blue',
},
],
}
this the chart:
multiple y horizontal bar
import { HorizontalBar } from 'react-chartjs-2'
import { dataPasienKeluarMasuk } from ...blabla
<HorizontalBar
data={dataPasienKeluarMasuk}
height={227}
options={{
responsive: true,
title: {
display: true,
text: 'Data Pasien Keluar Masuk',
fontSize: 20,
},
legend: {
display: true,
position: 'bottom',
},
scales: {
xAxes: [
{
stacked: true,
scaleLabel: {
display: true,
labelString: 'Jumlah Pasien (orang)',
},
ticks: {
// Include a dollar sign in the ticks
callback: (value) => Math.abs(value),
},
},
],
yAxes: [
{
stacked: true,
ticks: {
display: true,
reverse: true,
},
},
],
},
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
let ds = data.datasets[tooltipItem.datasetIndex]
return (
ds.label + ': ' + Math.abs(ds.data[tooltipItem.index])
)
},
},
},
}}
/>
You can obtain the desired result by defining a second y-axis as follows:
{
type: 'category',
position: 'right',
offset: true,
ticks: {
reverse: true,
},
gridLines: {
display: false
}
}
Please take a look at your amended and runnable code below:
new Chart(document.getElementById('canvas'), {
type: 'horizontalBar',
data: {
labels: ['0-4', '5-9', '10-14', '15-19', '20+'],
datasets: [{
label: 'Pasien Masuk',
data: [100, 90, 80, 70, 60],
backgroundColor: 'red',
},
{
label: 'Pasien Keluar',
data: [-100, -75, -60, -75, -70],
backgroundColor: 'blue',
},
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Data Pasien Keluar Masuk',
fontSize: 20,
},
legend: {
position: 'bottom',
},
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
let ds = data.datasets[tooltipItem.datasetIndex];
return ds.label + ': ' + Math.abs( ds.data[tooltipItem.index]);
}
}
},
scales: {
xAxes: [{
stacked: true,
ticks: {
callback: value => Math.abs(value)
}
}],
yAxes: [{
stacked: true,
ticks: {
reverse: true,
}
},
{
type: 'category',
position: 'right',
offset: true,
ticks: {
reverse: true,
},
gridLines: {
display: false
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="100"></canvas>
Using the following ticks config with Chart.js is overlapping with an unknown text only when the xAxes results are less than 7.
major: {
enabled: true
}
Here is my code:
options: {
scales: {
xAxes: [
{
type: 'time',
distribution: 'series',
display: true,
ticks: {
beginAtZero: false,
autoSkip: true,
maxTicksLimit: 10,
maxRotation: 0,
responsive: true,
legend: {
display: false,
},
major: {
enabled: true
}
}
}
]
}
}
The issue is bellow:
It's hard to guess the cause of your problem without seeing more of your code. In below runnable code snippet I use the same options as you and it works just fine.
Please make sure to use the most recent stable version of Chart.js (currently v2.9.3) and check if this solves your problem.
new Chart('chart', {
type: 'line',
data: {
datasets: [{
label: 'things',
borderColor: 'blue',
backgroundColor: 'lightblue',
data: [
{ t: new Date("05/01/2020"), y: 2 },
{ t: new Date("05/02/2020"), y: 0 },
{ t: new Date("05/03/2020"), y: 1 },
{ t: new Date("05/04/2020"), y: 7 },
{ t: new Date("05/05/2020"), y: 6 },
{ t: new Date("05/06/2020"), y: 4 }
]
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series',
ticks: {
beginAtZero: false,
autoSkip: true,
maxTicksLimit: 10,
maxRotation: 0,
responsive: true,
legend: {
display: false,
},
major: {
enabled: true
}
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chart" height="90"></canvas>
I need to highlight a fixed area of my chart with a different color between the values 0.5 and 1.5.
Currently my chart is as below:
The desired result is something like this:
As you can see in the above image, the intention is to have a fixed bar with a different color, that is always touching the maximum Y value (this chart auto adjusts the maximum Y value considering the plotted values). The idea is to show the red bars that are in or near this region.
Here is the currently config that I have for this chart:
configPotential = {
type: 'bar',
data: {
labels: [],
datasets: [{
data: [],
borderWidth: 0,
borderColor:'#E16972',
fill: true,
backgroundColor: "#E16972",
order: 1
}]
},
options: {
animation: {
duration: false, //remove animation
},
responsive: true,
tooltips: {
enabled: false
},
title: {
display: false
},
legend: {
display: false
},
elements: {
point:{
radius: 0
}
},
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'PSD (Hz/s²)'
},
ticks: {
beginAtZero: true,
suggestedMax: 0.2
}
}],
xAxes: [{
display: false,
},
{
gridLines : {
display : false
},
scaleLabel: {
display: false
},
type: 'linear',
ticks: {
beginAtZero: true,
autoSkip: false,
min: 0,
max: 0.5,
stepSize: 0.1,
}
}]
}
}
}
Resolved using the plugin Chart.Js Annotation - enter link description here
config = {
type: 'bar',
data: {
labels: [],
datasets: [{
data: [],
borderWidth: 0,
borderColor:'#E16972',
fill: true,
backgroundColor: "#E16972",
order: 1
}]
},
options: {
animation: {
duration: false, //remove animation
},
responsive: true,
tooltips: {
enabled: false
},
title: {
display: false
},
legend: {
display: false
},
elements: {
point:{
radius: 0
}
},
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'PSD (Hz/s²)'
},
ticks: {
beginAtZero: true,
suggestedMax: 0.2
}
}],
xAxes: [{
display: false,
},
{
gridLines : {
display : false
},
scaleLabel: {
display: false
},
type: 'linear',
ticks: {
beginAtZero: true,
autoSkip: false,
min: 0,
max: 0.5,
stepSize: 0.1,
}
}]
},
annotation: {
drawTime: 'beforeDatasetsDraw',
annotations: [{
type: 'box',
xScaleID: 'x-axis-1',
yScaleID: 'y-axis-1',
xMin: 0.5,
xMax: 0.15,
yMin: 0,
backgroundColor: 'rgba(195,207,221, 0.5)',
borderColor: 'rgba(195,207,221, 0.5)',
}]
}
}
}
So I only want to show the axes border lines - and hide the grid lines. This is using the latest version of the chart.js package (2.9.3) and I have replicated my issue in a simplified Codepen shown below:
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
labels: [4, 0],
datasets: [{
data: [
{ group_name: "Group A", x: 4, y: 25 },
{ group_name: "Group B", x: 0, y: 0 },
],
}],
},
options: {
legend: { display: false },
scales: {
yAxes: [ {
type: 'logarithmic',
scaleLabel: { display: true, labelString: 'Active %', fontSize: 15 },
position: 'left',
gridLines: { display: false, drawBorder: true },
ticks: {
min: 0,
max: 50,
maxTicksLimit: 4,
padding: 10,
callback: value => `${value.toLocaleString()}%`,
},
} ],
xAxes: [ {
type: 'logarithmic',
position: 'bottom',
scaleLabel: { display: true, labelString: 'User Count', fontSize: 15 },
gridLines: { display: false, drawBorder: true },
ticks: {
min: 0,
maxTicksLimit: 6,
padding: 10,
callback: value => value.toLocaleString(),
},
} ],
},
}
});
Any help or insight is appreciated; the settings I'd expect to work from the docs don't seem to be working.
You can put this options in gridline properties:
xAxes: [{
gridLines: {
display: true,
drawBorder: true,
drawOnChartArea: false
}
}]
Source: https://www.chartjs.org/samples/latest/scales/gridlines-display.html
Solved it (sort of). When I downgrade to chart.js 2.8.0 the chart borders now display as expected. With 2.9.3 the borders were not showing at all, regardless of chart type.
gridLines: { drawBorder: true, lineWidth: 0 }