I'm trying to have 3 different categories into one bar chart, but I just can't get it to work. I'm using chart.js with React.
This is what I'm trying to achieve:
Here's what I tried:
function VerticalBarChart({data,width,height}) {
const data= {
labels: ['Department',"Gender","Age"],
datasets:[
{
label: "Corporate",
backgroundColor: "blue",
data: [3]
},
{
label: "Warehouse",
backgroundColor: "blue",
data: [10]
},
{
label: "Finance",
backgroundColor: "blue",
data: [6]
},
{
label: ["Male","Female","Other"],
backgroundColor: "red",
data: [0,7,5]
},
{
label: ["18-29","30-49","50+"],
backgroundColor: "black",
data: [0,10,4]
}
],
options:{
responsive:true,
legend: {
display: false,
},
labels:{
fontColor: 'black',
fontFamily: "'Montserrat', sans-serif",
},
scales: {
yAxes: [{
ticks:{
beginAtZero:true
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
},
maintainAspectRatio: false,
}
};
return (
<div>
<Bar data={data} width={width} height={height} options={data.options} />
</div>
)
}
Which gives me this result:
If I do it like this, it creates additional spacing for the different categories. I'm trying to figure out how to arrange the data variable so that chart.js knows its separate categories and it's not tied to each other. Basically I'm trying to combine three different bar charts together in one.
Related
This is my code
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [{{ $nDate }}],
datasets: [{
label: 'All Users',
data: [ {{ $nUser }} ],
backgroundColor: ['rgba(54, 162, 235, 0.2)'],
borderColor: ['rgba(54, 162, 235, 1)'],
borderWidth: 3,
lineTension: 0,
labelFontSize : '16',
}]
},
options: {
tooltips: {
mode: 'index',
intersect: false,
position: 'nearest'
},
responsive: false,
legend: { display: false },
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
type: 'category',
labelOffset: 10,
stepSize:250,
callback: function(value, index) {
if (value !== 0) return value;
}
},
gridLines:{
drawBorder:false
}
}],
xAxes: [{
gridLines: {
display: false,
},
}],
},
plugins:{
datalabels:{
display:false
}
}
}
});
My output
My Expected Output
How can I able to put/edit custom tooltip in my line chart? I just want to get the exact tooltips in the second picture but I don't have any idea how to fix it? Another thing is my $nDateI only want to show four dates like 8,15,22,29 But when I tried to create a new array label with value of this [" ", " "]; my chart crashed.
You can use custom callback function to render with your own choice html tags and colors, Follow the official documentation link for further guidance.
http://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips
options: {
tooltips: {
enabled: false,
custom: function(tooltipModel) {}
}
}
I am working with a library that makes chartjs usable on react-native:
react-native-chartjs.
The chart works well, but when I press on the pie slices I only get the tooltip.
What I would like to, is to create my own function that will load a pop-up window instead of the tooltip provided by chart.js
How would you guys do it? Is it even doable? (I am pretty new to react-native, so sorry if it's a stupid question).
Image of the:
Chart
Chart code:
export const NutritionChart = (props) => {
return (
<Chart
chartConfiguration={
{
type: 'polarArea',
data: {
labels: ['Fiber', 'Protein', 'Healthy Oil', 'Good Energy']‚
datasets: [
{
label: '# of Votes',
data: [ 50, 140, 90, 120 ],
backgroundColor: backgroundColor,
borderColor: borderColor,
borderWidth: datasets.border,
hoverBackgroundColor: hoverBackgroundColor,
},
],
},
options: {
layout: {
padding: {
top: options.layout.padding.top,
bottom: options.layout.padding.bottom,
}
},
scale: {
display: false,
ticks: {
min:0,
max:200,
}
},
responsive: true,
maintainAspectRatio: false,
},
}
}
defaultFontSize={10}
/>
);
};
i am drawing a line chart using chart.js and showed a tooltip on graph.But i am not able to draw a border around tooltip and in title i want to show text and current y-axis value as title(eg.total count:2 but instead of 2 it showing undefined.Now i removed code from title callback). I am trying for many days but still no luck. Please help me. Here is my code
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels:["a","b","c"],
datasets: [{
label: 'Total count',
lineTension: 0,
data: [2,4,6],
fill: false,
borderColor: 'rgba(39,50,139,1)',
pointBackgroundColor:'rgba(176,179,214,1)',
pointBorderColor:'rgba(39,50,139,1)',
pointRadius:5,
pointHoverBackgroundColor:'rgba(39,50,139,1)',
borderWidth:2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend:{
display:false
},
chartArea: {
backgroundColor: '#fff'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
maxTicksLimit:3
}
}],
xAxes: [{
gridLines: {
display: false,
color: "black"
},
ticks: {
max:12,
maxTicksLimit:12
}
}]
},
tooltips: {
callbacks: {
title:function(tooltipItem, data) {
},
afterLabel: function(tooltipItem, data) {
return userNamesResult[tooltipItem.index];
}
},
titleSpacing:0,
titleMarginBottom:0,
titleFontColor:'#000',
backgroundColor: '#f2f3f4',
bodyFontColor: '#000',
//bodyFontStyle:'bold',
bodyFontSize: 14,
displayColors: false,
borderColor:'#ff0000',
borderWidth:5,
}
}
});
I'm trying to do a couple of things with ChartJS, but I can't find the information I need in the docs and they don't seem to have a forum or anywhere useful to ask questions.
The main thing I'm trying to accomplish is to have only one set of data displayed at a time. I was able to hide the one set on load, but when you click on it, I can't figure out how to hide the first. Eventually I might have 3 sets and would need to be sure the other two are hidden. I've read how to grab the click event, but I'm not sure what to return.
I'd also like to be able to customize the title & label text/layout, but I'm not sure if this is doable.
Here's what I have so far for code:
var ctx = $("#myChart");
var data = {
labels: ["LABEL1", "LABEL2", "LABEL3", "LABEL4", "LABEL5"],
datasets: [
{
label: "DATA1",
backgroundColor: "rgba(62,135,74,.5)",
pointBackgroundColor: "#34b44a",
data: [3, 3, 4, 2, 3]
},
{
label: "DATA2",
backgroundColor: "rgba(255,99,132,0.2)",
pointBackgroundColor: "rgba(255,99,132,1)",
data: [2, 2, 4, 4, 3],
hidden: true
}
]
};
var options = {
title: {
display: true,
fontColor: '#999',
fontStyle: 'regular',
fullWidth: false,
text: 'CHART TITLE'
},
legend: {
fullWidth: false,
labels: {
fontColor: '#fff',
boxWidth: 0
}
},
elements: {
line: {
}
},
scale: {
angleLines: {
color: '#666'
},
gridLines: {
color: '#666'
},
pointLabels: {
fontColor: '#fff'
},
ticks: {
min: 0,
max: 5,
stepSize: 1,
display: false
}
},
tooltips: {
enabled: false
}
};
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});
You can see it here with the design on the right: http://codepen.io/haxen2000/pen/jBVMqK
Here's a pen to my solution: http://codepen.io/haxen2000/pen/evgwmB
I just took out what I needed and made them HTML elements so I could style as needed. Would be nice to see a solution from within the ChartJS code, but this will work.
<div class='header'>
<span class='title'>CHART TITLE</span>
<button id='data1'>DATA1</button>
<button id='data2'>DATA2</button>
</div>
Can Chart.js v2.x generate a combined stacked bar chart with 2 unstacked lines utilizing one y-axis? If so, how?
Below fiddle has 2 y-axis. The descending line, would render better if the right y-axis had a maximum value of 6000 as does the left axis.
jsfiddle example.
Below is the code for reference.
// set default no fill beneath the line
Chart.defaults.global.elements.line.fill = false;
// stacked bar with 2 unstacked lines - nope
var barChartData = {
labels: ['2016', '2017', '2018', '2019'],
datasets: [{
type: 'bar',
label: 'a',
yAxisID: "y-axis-0",
backgroundColor: "rgba(217,83,79,0.75)",
data: [1000, 2000, 4000, 5000]
}, {
type: 'bar',
label: 'b',
yAxisID: "y-axis-0",
backgroundColor: "rgba(92,184,92,0.75)",
data: [500, 600, 700, 800]
}, {
type: 'line',
label: 'c',
yAxisID: "y-axis-0",
backgroundColor: "rgba(51,51,51,0.5)",
data: [1500, 2600, 4700, 5800]
}, {
type: 'line',
label: 'd',
yAxisID: "y-axis-1",
backgroundColor: "rgba(151,187,205,0.5)",
data: [5000, 3000, 1000, 0]
}]
};
var ctx = document.getElementById("chart").getContext("2d");
// allocate and initialize a chart
var ch = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: "Chart.js Bar Chart - Stacked"
},
tooltips: {
mode: 'label'
},
responsive: true,
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
position: "left",
id: "y-axis-0",
}, {
stacked: false,
position: "right",
id: "y-axis-1",
}]
}
}
});
Turns out, I just needed a modification or two so that the 2 y-axis use the same scale. See this jsfiddle. Now the chart renders better. The key, in my case, is adding a ticks node and these two properties to both yAxes objects:
ticks: {
beginAtZero: true,
suggestedMax: 5800
}
Naturally, the suggestedMax value would not be hard coded. Further, since the 2 scales are now the same, I hid the right scale with this property setting display: false.
As the fiddle shows, we now have 2 unstacked lines on a stacked bar chart nicely rendered.
Use this as the data for the graph:
var barData = {
labels: ['test1','test2'],
datasets: [
{
label: 'stack1',
backgroundColor: 'yellow',
borderColor: 'white',
borderWidth: 1,
stack: '1',
data: [5,4,3,2,1]
},
{
label: 'stack2',
backgroundColor: 'blue',
borderColor: 'white',
borderWidth: 1,
stack: '2',
data: [1,2,3,4,5]
}
]
};
This is the component to render the data:
<Bar data={barData} options={{scales: { xAxes: [{stacked:true}} }], yAxes:[{stacked:true}}] } }}}} />