I've built a bubble chart on quadrant graph using google-charts in reactjs but I can only had two labels on my axis and I need four.
I've tried fiddling with the code but unsuccessfully. I don't want to append dummy data and additional series elements. Is overlay the only option to add axis?
<Chart
width={"800px"}
height={"600px"}
chartType="BubbleChart"
loader={<div>Loading Chart</div>}
data={[
["Age", "Weight", "4", "Group", "Size"],
["Name", -12, 34, 1, 7],
["Name", -5.5, 6, 1, 8],
["Name", 22, 35, 1, 4],
["Name", 14, 4, 2, 5],
["Name", -5, -5, 2, 6],
["Name", 15, 34, 3, 1],
["Name4", 7, -21, 4, 22]
]}
options={{
bubble: {},
chartArea: { left: 20, top: 0, width: "90%", height: "95%" },
colors: ["red", "green", "yellow", "blue"],
hAxis: {
title: "Low Importance",
ticks: "none",
baseline: 0,
ticks: ["none"],
minValue: -50,
gridlines: { count: 0 },
maxValue: 50
},
vAxis: {
title: "Low Urgency",
baseline: 0,
ticks: ["none"],
minValue: -50,
gridlines: { count: 0 },
maxValue: 50
},
legend: "none"
}}
/>;
As you can see in the graph below, I can only get left and bottom labels but not top and right. Any ideas how I could achieve that using google-chart library for reactjs?
Related
I am using react-chart-2 Line to show graph;
What i want is to have 2 line in the same graph but instead of multiple value in y axis i want the same y axis but different label; example i have these label
const colors = ['red', 'yellow', 'blue', 'green', 'pink'];
const sharpe = ['circle', 'square']
and i have these value:
const colorsData = [10, 5, 8, 9, 7]
const sharpeData = [17, 2]
in my options scale i have
scales: {
x: {
grid: {
drawOnChartArea: false,
},
position: 'bottom' as const;
labels: colors
},
x1: {
grid: {
drawOnChartArea: true,
},
position: 'top' as const,
labels: sharpe,
},
y: {
beginAtZero: true,
ticks: {
maxTicksLimit: 5,
stepSize: 5,
},
},
},
and in my data i have
{
labels: colors,
datasets: [
{
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(13, 202, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: colorsData,
xAxisId: 'x'
},
{
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(202, 13, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: sharpeData,
xAxisId: 'x1',
}
]
}
the expected result is that i have 2 x axis , in the bottom is the colors and in the top the sharpe; one y axis; and the two line will be drawed but the colors depends on colorsData value and the sharpe depends on sharpeData value.
But instead the colors line is drawed as expected but the sharpe line follow the colors label instead of sharpe label
What you are trying to achieve is not possible. The values of the top and bottom axis should be the same. Unless you stack two charts on top of one another with css.
You can only have the same labels for both axis x and x1 or y and y1 respectively.
This is the official docs on Charts.js for y axis.
https://www.chartjs.org/docs/latest/samples/line/multi-axis.html
Here is some code to give you an idea of what I have come to with top and bottom x axis:
Options:
const config = {
type: 'line',
data: data,
options: {
responsive: true,
interaction:{
mode: "index",
intersect: false,
},
stacked: false,
scales: {
x:{
type: "linear",
display: true,
position: "bottom",
},
x1:{
type: "linear",
display: true,
position: "top",
grid: {
drawOnChartArea: false,
},
},
},
},
};
Data:
const colors = ['red', 'yellow', 'blue', 'green', 'pink'];
const sharpeData = [17, 2, 9, 12 ,3];
const colorsData = [10, 5, 8, 9, 7];
const data = {
labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
datasets: [
{
label: "Colors",
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(13, 202, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: colorsData,
xAxisId: 'x',
},
{
label: "Shape",
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderColor: 'rgba(202, 13, 240, 1)',
pointHoverBackgroundColor: '#fff',
borderWidth: 1,
data: sharpeData,
xAxisId: 'x1',
}
]
};
Hope this helps!
I'm really struggling to find a clear answer to this question - especially in React. I'd like to create a stacked horizontal bar chart component for my React application. This is the type of chart I'm trying to create: https://codepen.io/pen. The code pasted below is what I've tried to use so far but it isn't rendering currently.
import React, { Component } from 'react';
import Chart from 'chart.js/auto';
export default class LineChart extends Component {
chartRef = React.createRef();
componentDidMount() {
const ctx = this.chartRef.current.getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
],
},
options: {
scales: {
yAxes: [
{
stacked: true,
},
],
},
},
datasets: [
{
data: [86, 114, 106, 106, 107, 111, 133],
label: 'Total',
borderColor: '#3e95cd',
backgroundColor: '#7bb6dd',
// fill: False,
},
{
data: [70, 90, 44, 60, 83, 90, 100],
label: 'Accepted',
borderColor: '#3cba9f',
backgroundColor: '#71d1bd',
// fill: False,
},
{
data: [10, 21, 60, 44, 17, 21, 17],
label: 'Pending',
borderColor: '#ffa500',
backgroundColor: '#ffc04d',
// fill: False,
},
{
data: [6, 3, 2, 2, 7, 0, 16],
label: 'Rejected',
borderColor: '#c45850',
backgroundColor: '#d78f89',
// fill: False,
},
],
});
}
render() {
return (
<div>
<canvas id="myChart" ref={this.chartRef} />
</div>
);
}
}
You are using V2 syntax of Chart.js while using V3. V3 has major breaking changis inclusing all scales are their own object. For all changes please read the migration guide.
When using objects for scales you get what you want:
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'pink'
}
]
},
options: {
scales: {
y: {
stacked: true
},
x: {
stacked: true
}
}
}
}
const 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.7.1/chart.js"></script>
</body>
I am having trouble getting the yaxis tick labels to align to the bars properly when stacking horizontal bars by using base (my use case is a timeline view so i need empty spaces in between the stacked bars, thus why i am using base)
here is a codepen showcasing the issue: https://codepen.io/dan-wiegand/pen/GRMwKGP?editors=0010
var data = [{
type: 'bar',
x: [0, 10, 10, 0],
base: [0, 10, 20, 30],
y: ['trace 1', 'trace 1', 'trace 1', 'trace 1'],
orientation: 'h'
}, {
type: 'bar',
x: [0, 10, 0, 10],
base: [0, 10, 20, 30],
y: ['trace 2', 'trace 2', 'trace 2', 'trace 2'],
orientation: 'h'
}, {
type: 'bar',
x: [10, 0, 10, 0],
base: [0, 10, 20, 30],
y: ['trace 3', 'trace 3', 'trace 3', 'trace 3'],
orientation: 'h'.
}];
const layout = {
yaxis: {
showgrid: true
}
};
Plotly.newPlot('myDiv', data, layout);
(code required to post codepen link)
for those familiar with flex box, it's visually like the difference between space-around and space-between (bars being space between and ticks being space around)
My issue is visible below
and here it is in my actual case - if they all looked like "Copy Valence" that would be perfect
i dont care if the labels are along the axis lines or in the empty spaces, as long as the labels and the bars are aligned! In a perfect world the chart would be aligned like below, with the tick labels in the space between the ticks and the bars between ticks
question is tagged with python and javascript. Solution on python but concept same across languages
for each trace use a separate yaxis y, y2, y3
in layout set domain of each yaxis
import plotly.graph_objects as go
data = [
{
"type": "bar",
"x": [0, 10, 10, 0],
"base": [0, 10, 20, 30],
"y": ["trace 1", "trace 1", "trace 1", "trace 1"],
"orientation": "h",
"yaxis": "y",
},
{
"type": "bar",
"x": [0, 10, 0, 10],
"base": [0, 10, 20, 30],
"y": ["trace 2", "trace 2", "trace 2", "trace 2"],
"orientation": "h",
"yaxis": "y2",
},
{
"type": "bar",
"x": [10, 0, 10, 0],
"base": [0, 10, 20, 30],
"y": ["trace 3", "trace 3", "trace 3", "trace 3"],
"orientation": "h",
"yaxis": "y3",
},
]
go.Figure(data).update_layout(
{
ax: {"showgrid": True, "domain": [i * 0.33, (i + 1) * 0.33]}
for i, ax in enumerate(["yaxis", "yaxis2", "yaxis3"])
}
)
I'm trying to make a chart for Peak Hours and I want the hour with the highest value to be of a different color, how do I do that? For example, in the data array, ideally the one that should have a different bar color would be the one with the value "12". Currently I've only set one color in the data.datasets.backgroundColor and I'm not sure how to add a backgroundColor conditionally. I'm using React so I've installed chartjs in my project. Ideally it should look something like
render() {
return (
<div
style={{ padding: "0 15px" }}
className="chart"
>
<div>
<span>1 PM usually busy</span>
</div>
<Bar
height={145}
responsive={false}
data={{
labels: [
"00",
"",
"",
"03",
"",
"",
"06",
" ",
"",
"09",
"",
"",
"12",
"",
"",
"15",
"",
"",
"18",
" ",
"",
"21",
" ",
"",
"24",
],
fontSize: 1,
datasets: [
{
label: "Time",
data: [
2,
0,
3,
4,
5,
8,
7,
8,
9,
10,
11,
12,
11,
10,
9,
6,
7,
8,
7,
5,
4,
3,
2,
8,
],
backgroundColor: ["#33AF4F"],
borderWidth: 0,
},
],
}}
options={{
barThickness: 10,
borderRadius: 10,
plugins: {
legend: {
display: false,
labels: {
fontSize: 9,
boxWidth: 5,
usePointStyle: true,
},
},
},
scales: {
x: {
ticks: {
font: {
size: 10,
},
},
stacked: true,
grid: {
display: false,
},
},
y: {
ticks: {
display: false,
},
stacked: true,
grid: {
borderDash: [2, 3],
color: "#bdbdbd",
},
},
},
}}
/>
</div>
);
}
You have to call function giving conditional array of colors for in the place of backgroundColor: ["#33AF4F"]
taking into consideration that you want highest value with different color create this function before rendering component.
function getBgColors() {
var array = [2,0,3,4,5,8,7,8,9,10,11,12,11,10,9,6,7,8,7,5,4,3,2,8];
var maxValue = Math.max.apply(this, array);
var bg = array.map(a => a === maxValue ? "#0f7d28" : "#33AF4F");
return bg;
}
and call this function at backgroundColor: getBgColors()
With react-chartjs-2, creating Bar Graph as below. I am trying to make the legends in square shape rather than default rectangle.
I applied boxWidth: 10 as below but it doesn't work, Is there any other possible alternatives to generate a square legend
const sample_data = {
labels: ['Item1', 'Item2'],
datasets: [
{
data: [10, 10, 50],
borderWidth: 1,
backgroundColor: 'yellow',
},
{ data: [20, 20, 20],
borderWidth: 1,
backgroundColor: 'green'
},
],
};
const sample_options = {
responsive: true,
legend: {
boxWidth: 10, // Also 0 doesn't make any change
},
...
};
<Bar data={sample_data} options={sample_options} />;
You will have to put the boxWidth in the labels part of the legend options as stated in the documentation: https://www.chartjs.org/docs/latest/configuration/legend.html#legend-label-configuration
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: {
legend: {
labels: {
boxWidth: 10
}
},
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
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" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>