How to make Chart JS ignore the scale between DatasSets - reactjs

I'm trying to create a multi-bar chart where one of the bars is really lower than the other ones. (I'm comparing low numbers X high numbers X high numbers)
This is my dataSet:
[
{
"label": "# Negócios Fechados",
"data": [ 8, 5, 3, 12 ],
"backgroundColor": "rgba(255, 99, 132, 1)"
},
{
"label": "# Valor Total",
"data": [ 16000, 25000,4500, 36000 ],
"backgroundColor": "rgba(54, 162, 235, 1)"
},
{
"label": "# Ticket Médio",
"data": [ 2000, 5000, 1500, 3000 ],
"backgroundColor": "rgba(255, 206, 86, 1)"
}
]
This is what my chart looks like:
The "# Negócios Fechados" one is there, but It's so low that It's impossible to mouse hover it.
I want to know if it is possible to make this single bar ignore the scale of the rest.

You can define a multi-axis chart, similar to this sample.
Please take a look at the following runnable code and see how it works.
new Chart('myChart', {
type: 'bar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: "# Negócios Fechados",
data: [8, 5, 3, 12],
backgroundColor: "rgba(255, 99, 132, 1)",
yAxisID: 'y2',
},
{
label: "# Valor Total",
data: [16000, 25000, 4500, 36000],
backgroundColor: "rgba(54, 162, 235, 1)"
},
{
label: "# Ticket Médio",
data: [2000, 5000, 1500, 3000],
backgroundColor: "rgba(255, 206, 86, 1)"
}
]
},
options: {
scales: {
y: {
position: 'right',
beginAtZero: true
},
y2: {
grid: {
drawOnChartArea: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

Related

Can't change the default color and font size of labels in react-chartjs-2

So I want to render a simple bar graph in my website, I am using react-chartjs-2 for the same but I can't seem to change the default fontsize or even the color of the x label and ylabels. I have gone through the other answers but none of them are working for me. I have been at it for the last 2 hours and I still can't figure out whats the problem.
Here is my code
import React from 'react'
import './model.css'
import {Bar} from 'react-chartjs-2'
function Model() {
const data = {
labels: ['red', 'blue', 'white', 'green'],
datasets: [
{
label: '# of days',
data: [6, 7, 2, 14],
backgroundColor: [
'rgba(255, 99, 132, 0.4)',
'rgba(54, 162, 235, 0.4)',
'rgba(255, 206, 86, 0.4)',
'rgba(75, 192, 192, 0.4)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
],
borderWidth: 1,
},
],
};
const options= {
legend: {
labels: {
fontColor: "blue",
fontSize: 18
}
},
scales: {
yAxes: [{
ticks: {
fontColor: "white",
fontSize: 18,
stepSize: 1,
beginAtZero: true
}
}],
xAxes: [{
ticks: {
fontColor: "white",
fontSize: 14,
stepSize: 1,
beginAtZero: true
}
}]
}
}
return (
<div className="model-container">
<Bar
data={data}
options={options}
/>
</div>
)
}
export default Model
I would asume you are using v3, in v3 the scales have been reworked in how you write them, you can read all changed in the migration guide, to know for sure where to put the options and how there name is you can just check the documentation itself
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: {
y: {
ticks: {
color: 'red',
font: {
size: 14,
}
}
},
x: {
ticks: {
color: 'red',
font: {
size: 14
}
}
}
}
}
}
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>

add numeric value with different color in radar labels

I am new to chart.js. i need help in adding a numeric value to radar chart point labels with different color. eg radar label with styling
labels color should be in black.
numeric value should be in a different predefined color(eg blue).
new Chart('radar-chart', {
type: 'radar',
data: {
labels: ['mon 30', 'tue 40', 'thurs 25', 'fri 45', 'sat 67', 'sun 50'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}],
},
options: {
plugins: {
legend: {
display: false
}
},
scales: {
r: {
pointLabels: {
color: 'black',
font: {
size: 20,
style: 'italic'
}
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.min.js"></script>
<canvas id="radar-chart"></canvas>
the values near the labels in vertex should be in a predefined color(eg blue) -like the one attached in image.
please feel free to give a different approach to achieve this requirement. Thanks in advance for the help.

Grouped bar chart with react-chartjs-2

I need to show multiple values for a month, in a bar graph.
Similar to this:
But the only example I am coming up with, is stacked... where we have one bar, with multiple values.
What I have at the moment:
render() {
const options={
responsive: true,
legend: {
display: false,
},
type:'bar',
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
return (
<Bar
data={this.props.data}
width={null}
height={null}
options={options}
/>
)
And data is:
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(255,99,132,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
stack: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: 'My second dataset',
backgroundColor: 'rgba(155,231,91,0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1,
stack: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [45, 79, 10, 41, 16, 85, 20]
}
]
}
But this gives me:
Is there a way I can do grouping, instead of stacking?
Try this
remove scales from option
remove stack: 1 from datasets
Link to code in codesandbox

How to Show percentage in doughnutChart Piechat in Ionic2

I am Beginner in Ionic 2. I am using Chart.js Library to show pie chart in Hybrid mobile Application.
I have successfully show data in pie chart but its show numbers,I want to show percentage instead of numbers.
This is my code
this.doughnutChart = new Chart(this.doughnutCanvas.nativeElement, {
type: 'doughnut',
data: {
labels: data1, //data1 contains [100 ,50 ,200 ,500 ,60]
datasets: [{
label: '# of Votes',
data: data2, //data2 contains [Gerberea,Lili,Rose,Sunflower,Lotus]
backgroundColor: [
'rgba(0, 99, 132, 0.2)',
'rgba(25, 162, 235, 0.2)',
'rgba(50, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(100, 102, 255, 0.2)',
'rgba(125, 159, 64, 0.2)'
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
}
});
Use tooltips in options, you can calculate percentage in that and show as label.
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
});
var currentValue = dataset.data[tooltipItem.index];
var precentage = ((currentValue/total) * 100).toFixed(2);
return precentage + "%";
}
}
}
}
Demo sample
var config = {
type: 'doughnut',
data: {
labels: ['Gerberea', 'Lili', 'Rose', 'Sunflower', 'Lotus'],
datasets: [{
label: '# of Votes',
data: [100, 50, 200, 500, 60],
backgroundColor: [
'rgba(0, 99, 132, 0.2)',
'rgba(25, 162, 235, 0.2)',
'rgba(50, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(100, 102, 255, 0.2)',
'rgba(125, 159, 64, 0.2)'
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56",
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
});
var currentValue = dataset.data[tooltipItem.index];
var precentage = ((currentValue / total) * 100).toFixed(2);
return precentage + "%";
}
}
}
}
};
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx, config); {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>
<canvas id="chart-area" />

reactjs charts implementation

I'm trying to implement a Line chart in my react app. I found this when searching for charts.
https://github.com/reactjs/react-chartjs
I have used this piece of code but it isn't clear how to use chartData and chartOptions
var LineChart = require("react-chartjs").Line;
var MyComponent = React.createClass({
render: function() {
return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
}
});
How can i declare the chartData and chartOptions inorder to get my Linechart work?
You need to define chartData and chartOptions as objects in your React Component. A sample chartData will look like
For a line Chart
var chartOptions: {
// Boolean - If we should show the scale at all
showScale: true,
// Boolean - Whether to show a dot for each point
pointDot: true,
showLines: false,
title: {
display: true,
text: 'Chart.js Bar Chart'
},
legend: {
display: true,
labels: {
boxWidth: 50,
fontSize: 10,
fontColor: '#bbb',
padding: 5,
}
}
var chartData = {
labels: [['Sunday', 'Monday'], ['Sunday', 'Tuesday']],
datasets: [
{
color: "#4D5360",
highlight: "#616774",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
label: 'Current lag',
fill: false,
lineTension: 0.1,
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
scaleOverride: true, scaleStartValue: 0, scaleStepWidth: 1, scaleSteps: 30,
data: [[5, 8], [3, 11]]
}
]
}
For a barChart
var chartData = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
var chartOptions = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
See the docs here for more information on the object properties:

Resources