I'm using react-chartjs-2.
<HorizontalBar
options={{
legend: {
display: false,
},
tooltips: {
enabled: false,
},
hover: {
mode: null,
},
scales: {
xAxes: [
{
display: false,
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
position: 'right'
},
],
yAxes: [
{
position: "right",
ticks: {
reverse: true,
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
},
],
},
plugins: {
tooltip: {
enabled: false,
},
},
}}
data={{
datasets: [
{
label: "My First dataset 2",
borderWidth: 0,
backgroundColor: [
"#68B68A",
"#5B9FC9",
"#83C39F",
"#85B7D6",
"#9FD1B4",
"#C2DAEB",
],
data: ...,
barPercentage: 0.5,
},
],
}}
/>
I need to align horizontal bars to the right side like this
but actual result from my code is this
You could use floating bars for this:
const options = {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [
[
20,
12
],
[
20,
19
],
[
20,
3
],
[
20,
5
],
[
20,
2
],
[
20,
14
]
],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
You put the maximum value of your axis as the first or last (chart.js will render it the same) in your array. Then for the other value you enter the start point. So that would be max value - the percentage
Related
I'm looking to create a drilldown using the CChartBar available in the CoreUI documentation here: https://coreui.io/react/docs/3.3/components/CCharts/
I need to be able to get the month from the bar that is clicked, and when the bar is clicked, it needs to take the user to another page. How do I get the information? How to I make each bar clickable to send the user to the table page?
Currently here is the html
<div className="chart-container">
<CChartBar
datasets={[
{
label: "Expected Expirations",
type: "bar",
data: expectedExpirations,
backgroundColor: "#949fe8",
borderColor: "blue",
fill: true,
order: 2,
},
{
label: 'Actual Expirations',
type: "bar",
data: actualExpirations,
backgroundColor: '#556ad1',
borderColor: "blue",
fill: true,
order: 1,
},
{
label: 'Target Expirations',
backgroundColor: '#352c2c',
data: targetExpirations,
type: "line",
borderColor: "black",
fill: true,
order: 0,
borderWidth: 2,
fill: "#352c2c",
pointBackgroundColor: "#352c2c",
lineTension: 0,
}
]}
labels={dateLabels}
onClick={(event) => drillDown(event)}
options={{
maintainAspectRatio: false,
responsive: true,
tooltips: {
enabled: true,
},
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: "Month"
}
}],
yAxes: [{
ticks: {
stacked: true,
beginAtZero: true,
stepValue: 10,
max: maxOfAllExpirations
},
scaleLabel: {
display: true,
labelString: "Number of Lease Expirations"
}
}]
},
}}
/>
I would like to be able to click on the bar, and get the data that is being charted, so I can pass the month to another page.
You can use the onClick function for this:
var options = {
type: 'bar',
data: {
labels: ["December 2020", "Januarie 2021", "Feb 2021", "March 2021", "April 2021", "May 2021"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 3, 3],
backgroundColor: 'pink'
}]
},
options: {
onClick: (evt, activeEls) => {
console.log(activeEls[0]._model.label)
console.log(activeEls[0]._model.label.split(" ")[0])
}
}
}
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>
<div className = "chart-container" >
<CChartBar
datasets = {
[{
label: "Expected Expirations",
type: "bar",
data: expectedExpirations,
backgroundColor: "#949fe8",
borderColor: "blue",
fill: true,
order: 2,
},
{
label: 'Actual Expirations',
type: "bar",
data: actualExpirations,
backgroundColor: '#556ad1',
borderColor: "blue",
fill: true,
order: 1,
},
{
label: 'Target Expirations',
backgroundColor: '#352c2c',
data: targetExpirations,
type: "line",
borderColor: "black",
fill: true,
order: 0,
borderWidth: 2,
fill: "#352c2c",
pointBackgroundColor: "#352c2c",
lineTension: 0,
}
]
}
labels = {
dateLabels
}
onClick = {
(event) => drillDown(event)
}
options = {
{
onClick: (evt, activeEls) => {
console.log(activeEls[0]._model.label)
console.log(activeEls[0]._model.label.split(" ")[0])
},
maintainAspectRatio: false,
responsive: true,
tooltips: {
enabled: true,
},
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: "Month"
}
}],
yAxes: [{
ticks: {
stacked: true,
beginAtZero: true,
stepValue: 10,
max: maxOfAllExpirations
},
scaleLabel: {
display: true,
labelString: "Number of Lease Expirations"
}
}]
},
}
}
/>
``
I am building a covid-19 tracker, but when data is displayed on the graph using react charts title is coming out to be undefined
This is my chart code
<div >
{data?.length > 0 && (
<Line
data={{
datasets: [
{
backgroundColor: "rgba(204, 16, 52, 0.5)",
borderColor: "#CC1034",
data: data,
},
],
}}
options={options}
/>
)}
</div>
These are my option parameters
const options = {
legend: {
display: false,
},
elements: {
point: {
radius: 0,
},
},
maintainAspectRatio: false,
tooltips: {
mode: "index",
intersect: false,
callbacks: {
label: function (tooltipItem, data) {
return numeral(tooltipItem.value).format("+0,0");
},
},
},
scales: {
xAxes: [
{
type: "time",
time: {
format: "MM/DD/YY",
tooltipFormat: "ll",
},
},
],
yAxes: [
{
gridLines: {
display: false,
},
ticks: {
// Include a dollar sign in the ticks
callback: function (value, index, values) {
return numeral(value).format("0a");
},
},
},
],
},
};
Although legend is set to false I am getting an error.
Please tell me where I am going wrong, that will be helpful.
Image of a chart.
You need to pass the label property here
data={{
datasets: [
{
backgroundColor: "rgba(204, 16, 52, 0.5)",
borderColor: "#CC1034",
data: data,
label: "your label" // <-- pass this
},
],
}}
Our requirement is to render the bar chart as Expected Image. we are using chartJs library to render the chart. we are able to render the bar chart but for one of the bar we need to show
the background color as gradient. To achieve this we used the following below code snippet:
but it render as Rendered graph. Can you please help me out in rendering the chart as expected.
JSFiddleLink
const data = [{
type: "Sample 1",
data: [600, 400, 200, 800]
}, {
type: "Sampel 2",
data: [700, 300, 600, 600]
}, {
type: "Total",
data: [1300, 700, 800, 1400]
}];
const gradient = document.getElementById('myChart').getContext('2d').createLinearGradient(0, 250, 0, 0);
gradient.addColorStop(1, '#acd7fa')
gradient.addColorStop(0.4, '#FFFFFF')
new Chart('myChart', {
type: "bar",
data: {
labels: ["A", "B", "C", "D"],
datasets: [
{
label: data[0].type,
xAxisID: "x1",
data: data[0].data,
// fillColor: background_1,
// highlightFill: background_2,
backgroundColor: "rgb(54, 162, 235)" ,
// backgroundColor: background_1,
barPercentage: 1,
},
{
label: data[1].type,
xAxisID: "x1",
data: data[1].data,
backgroundColor:"rgb(255, 159, 64)",
barPercentage: 1,
},
{
label: data[2].type,
xAxisID: "x2",
data: data[2].data,
backgroundColor: gradient,
barPercentage: 1,
},
],
},
options: {
legend: {
labels: {
filter: item => item.text != 'Total'
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
stepSize: 200
}
}],
xAxes: [{
id: 'x1'
},
{
id: 'x2',
display: false,
offset: true
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="150"></canvas>
The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterLayout hook for creating different gradients for each value of the third dataset (the totals).
Please take a look at your amended code below and see how it works. You may also consult this StackBlitz that illustrates how it can be done with react-chartjs-2.
const data = [
{ type: "Sample 1", data: [600, 400, 200, 800] },
{ type: "Sampel 2", data: [700, 300, 600, 600] },
{ type: "Total", data: [1300, 700, 800, 1400] }
];
new Chart('myChart', {
type: "bar",
plugins: [{
afterLayout: chart => {
let ctx = chart.chart.ctx;
ctx.save();
let yAxis = chart.scales["y-axis-0"];
let yBottom = yAxis.getPixelForValue(0);
let dataset = chart.data.datasets[2];
dataset.backgroundColor = dataset.data.map(v => {
let yTop = yAxis.getPixelForValue(v);
let gradient = ctx.createLinearGradient(0, yBottom, 0, yTop);
gradient.addColorStop(0.4, '#FFFFFF');
gradient.addColorStop(1, '#acd7fa');
return gradient;
});
ctx.restore();
}
}],
data: {
labels: ["A", "B", "C", "D"],
datasets: [{
label: data[0].type,
xAxisID: "x1",
data: data[0].data,
backgroundColor: "rgb(54, 162, 235)",
barPercentage: 1
},
{
label: data[1].type,
xAxisID: "x1",
data: data[1].data,
backgroundColor: "rgb(255, 159, 64)",
barPercentage: 1
},
{
label: data[2].type,
xAxisID: "x2",
data: data[2].data,
barPercentage: 1
}
]
},
options: {
legend: {
labels: {
filter: item => item.text != 'Total'
}
},
scales: {
yAxes: [{
ticks: {
min: 0,
stepSize: 200
}
}],
xAxes: [{
id: 'x1'
},
{
id: 'x2',
display: false,
offset: true
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="150"></canvas>
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
}
}]
}
}