Apply border radius to the bars of Bar_Chart using react-chartjs-2 module so please suggest changes in this code only.
i tried radius in data component but it didn't work .
import { Bar } from 'react-chartjs-2';
<Bar
data={{
labels :['2020-10-26', '2020-10-27', '2020-10-28', '2020-10-29'],
datasets: [
{
label: 'r',
data: [130,220,310,420],
backgroundColor: 'rgb(255, 144, 18)',
},
{
label: 'm',
data: [100,200,149,330],
backgroundColor: '#66CCFF',
},
{
label: 'u',
data: [90,150,30,240],
backgroundColor: '#00FF99',
},
],
}}
options={{
responsive: true,
cornerRadius:19,
// plugins: {
legend: {
cursor: "pointer",
display:true,
position:'bottom',
labels: {
usePointStyle: true,
boxWidth:10,
}
},
// },
scales: {
xAxes: [{
gridLines: {
display:false
}
}]}
}}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
/>
Want my bars to be round from above like this only visuals are example not code
https://codepen.io/jordanwillis/pen/jBoppb
You have to apply borderRadius parameter in datasets as per below code
datasets: [
{
label: 'r',
data: [130,220,310,420],
backgroundColor: 'rgb(255, 144, 18)',
borderRadius : 50 // You can apply any value as per your requirement
},
{
label: 'm',
data: [100,200,149,330],
backgroundColor: '#66CCFF',
borderRadius : 50
},
{
label: 'u',
data: [90,150,30,240],
backgroundColor: '#00FF99',
borderRadius : 50
}]
Try borderRadius in options object instead
Related
Chart.js doughnut text visibility. Tell me how to make it so that when the values intersect, the text comes out and changes its position.
const myChart = new Chart(canvas,
{
type: 'doughnut',
data: {
labels: dataNameDB,
datasets: [{
data: dataCountDB,
backgroundColor: backgroundColor,
borderWidth: 0,
}],
},
plugins: [ChartDataLabels, DoughnutLabel],
options: {
cutout: 340,
responsive: true,
animation: false,
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: (val, ctx) => {
return Math.round((ctx.chart.data.datasets[0].data[ctx.dataIndex] * 100) / summChart()) + "%";
},
display: (val,ctx) =>{
return 'auto';
},
clamp: true,
clip: true,
anchor: 'center',
align: 'center',
offset: 1,
font: {
size: 65,
weight: 'bold',
color: '000000'
},
color: '000000',
labels: {
value: {
color: '#000000'
}
}
},
doughnutlabel: {
labels: [{
text: summChart,
font: {
size: 140,
weight: 'bold',
color: '000000'
}
}]
}
}
}
},
);
Now it outputs something like this, but I need it to be like this:
Although the documentation says that display 'auto' is responsible for this, how to catch it when the text is hidden in order to move it?
How to set the labels & x axis and y axis colour into white here? It is coming in grey colour and I don't know why, or how to reset it to white colour .
I need my y axis which goes as "10,20,30,40,50..." font color as white, and x axis which goes as "jan,feb,mar..." font color into white, and on top there is label giving Appointment and canceled which I want its color also to be white.
const data = {
labels: graph,
datasets: [
{
label: "Appointment",
data: appointment,
backgroundColor: "#6c8bff",
Color: "white",
// hoverBackgroundColor: "rgba(255,99,132,0.4)",
borderColor: "#6c8bff",
borderWidth: 1,
},
{
label: "Cancelled",
Color: "white",
backgroundColor: "red",
borderColor: "red",
borderWidth: 1,
data: cancelled,
},
],
};
const options = {
legend: {
labels: {
fontColor: "white",
// fontSize: 18,
},
},
scales: {
yAxes: [
{
ticks: {
fontColor: "white",
beginAtZero: true,
},
},
],
},
};
return (
<>
<Bar data={data} options={options} />
</>
);
}
I have this simple line chart that I am trying to change the gridlines from their default gray, however the options object appears to be selectively working. Maybe I am missing something basic but I have been fiddling with it for hours and cannot get it to work, any help is appreciated! I am using "react-chartjs-2".
Below is my render() method where I pass the data and options.
render() {
const data = {
labels: this.state.realTimes,
datasets: [
{
label: "Price",
data: this.state.Prices,
fill: false,
backgroundColor: "rgb(255, 255, 255)",
borderColor: "rgba(255, 255, 255)"
}
]
};
const options = {
scales: {
yAxis: {
beginAtZero: true, //this works
gridLines: {
color: "rgba(171,171,171,1)", //this doesn't
lineWidth: 0.5
}
}
}
};
return (
<div>
{this.state.loading ? (
this.loading()
) : (
<Line data={data} options={options} width={600} height={160} />
)}
</div>
);
}
Change scales.yAxis.gridLines to scales.yAxis.grid and it will work.
see Grid Line Configuration from Chart.js documentation or the Grid Configuration samples page.
Please take a look at below runnable JavaScript code and see how it works.
Please take a look at
new Chart('line-chart', {
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: 'My Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.2
}]
},
options: {
scales: {
yAxis: {
beginAtZero: true,
grid: {
color: 'rgb(0 ,0 ,255)',
lineWidth: 0.5
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<canvas id="line-chart" height="100"></canvas>
React chart.js is not up to date with chart.js so you can't use v3. Please use the v2 syntax since that is what react-chartjs uses.
https://www.chartjs.org/docs/2.9.4/axes/styling.html#grid-line-configuration
If you change yAxes: {gridLines: {color: 'red'}} to yAxes: [{gridLines: { color: 'red'}}] it should work as intended
Hell, all,
I would like to draw the chart like this:
Currently, I can use afterBuildTicks to get only zero yAxis. But the problem is that the whole other ticks were removed also. So Not sure if we have a way to draw zero tick and keep other ticks hidden except the label.
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Value 1', 'Value 2', 'Value 3', 'Value 4'],
datasets: [{
label: "Dataset",
data: [20, 15, 27, 18],
backgroundColor: 'rgba(54, 162, 235,0.5)',
}],
},
options: {
responsive: true,
elements: {
line: {
fill: false
}
},
scales: {
xAxes: [
{
position: 'top',
display: true,
gridLines: {
display: true,
},
stacked: true,
ticks: {
fontColor: "#C4C4C4",
fontSize: 10,
}
}
],
yAxes: [
{
type: 'linear',
display: true,
position: 'right',
id: 'y-axis-1',
gridLines: {
display: true,
},
labels: {
show: true
},
stacked: false,
ticks: {
fontColor: "#C4C4C4",
fontSize: 10,
precision: 0,
suggestedMax: 100,
suggestedMin: -100
},
afterBuildTicks:function (axis) {
axis.ticks = [0]
}
}
]
},
tooltips: {
mode: 'label',
bodySpacing: 10,
titleMarginBottom: 10,
titleFontSize: 14,
titleFontStyle: 'bold',
footerAlign: 'right',
callbacks: {
label: (tooltipItem, data) => {
const label = data.datasets[tooltipItem.datasetIndex].label || ''
const value = tooltipItem.value
return ` ${label}: ${value}`
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
Thanks so much
I found the solution that use: gridLines options to draw chart with width is zero:
gridLines: {
display: true,
tickMarkLength: 10,
lineWidth: 0
}
After setting up a stacked horizontal bar chart using chartjs, the x-axis cannot be hidden. I have tried numerous ways to remove it like using "display:false" and making the text transparent but to no avail. Here is what it looks like and what I want it to look like:
https://imgur.com/a/mKYViUx
Thanks in advance~!
Current Chartjs code:
datasets: [
{
label: 'Example Data One',
data: [10],
backgroundColor: '#C4D156',
borderColor: "#ffffff",
borderWidth: 1.5
},
{
label: 'Example Two, etc',
data: [25],
backgroundColor: '#68A03F',
borderColor: "#ffffff",
borderWidth: 1.5
},
{
label: 'Three',
data: [55],
backgroundColor: '#2F9138',
borderColor: "#ffffff",
borderWidth: 1.5
}
]
};
},
options: {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
bodySpacing: 4,
xPadding: 12,
mode: "nearest",
intersect: 0,
position: "nearest"
},
responsive: true,
scales: {
yAxes: [
{stacked: true},
],
xAxes: [
{stacked: true},
{gridLines: {
display:false
}
},
]
}
}
Hiding the label/text on the axis is done with that
options: {
...
scales: {
...
xAxes: [{
ticks: {
display: false //this will remove the label/text
}
}]
}
}