Hi I have a chart with chartjs, which inserts between min, max, average values, with a bar type chart.
So far, everything is fine, the values are entered, what I want to do is that the bars of the graph are positioned starting from their min on the y axis up to the maximum on the y axis, I do not want the bar to start from the value 0.
dataset = {
labels: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'],
datasets: [{
label: 'min',
borderWidth: 4,
borderColor: "#ef4931",
backgroundColor: "#ef4931",
borderJoinStyle: 'miter',
pointHitRadius: 10,
data: data[1],
fill: false,
},
{
label: 'avg',
borderWidth: 4,
borderColor: "#ef4931",
backgroundColor: "#ef4931",
borderJoinStyle: 'miter',
pointHitRadius: 10,
data: data[0],
fill: "-1",
},
{
label: 'max',
borderWidth: 4,
borderColor: "#ef4931",
backgroundColor: "#ef4931",
borderJoinStyle: 'miter',
pointHitRadius: 10,
data: data[2],
fill: "-1",
}
]
};
options = {
legend: {
display: false,
},
title: {
display: true,
position: 'bottom',
fontSize: 14
},
tooltips: {
mode: 'index',
intersect: false,
titleFontStyle: "bold",
titleFontColor: "rgba(255, 255, 255, 1)",
bodyFontStyle: "normal",
bodyFontColor: "rgba(255, 255, 255, 1)",
backgroundColor: "rgba(102, 102, 102, 1)",
borderWidth: 1,
bodySpacing: 5,
xPadding: 15,
yPadding: 15,
displayColors: false,
callbacks: {
title: function(item, data) {
var title = "";
title += item[0].xLabel;
return title;
}
}
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
barThickness: 10,
}],
yAxes: [{
stacked: true,
display: true,
scaleLabel: {
display: true,
fontSize: 14,
fontStyle: "bold",
},
ticks: {
callback: function(value, index, values) {
return parseInt(value) + " bpm";
},
}
}]
},
animation: {
duration: 1000,
easing: "easeInOutQuad"
}
};
myChart.config.data = dataset;
myChart.options = options;
myChart.config.type = "bar";
myChart.update();
in your y axes config you can add the prop suggestedMin or min between the stacked and display prop. With this the scale will start at that number, here you can put in the value of the lowest bar.
SuggestedMin will go lower if there is a bar with a lower value, if you use min if will use that as a final so if you have a bar with a lower value it wont get shown.
You can combine "floating bars" and "stacked bar chart". See https://codepen.io/fantasyzer/pen/KKaqgoM for an example. Note that the data of each bar is given as an array [Ybegin,Yend]. If you set stackable to false for the y scale the values are to be given as absolute:
datasets: [
{
data: [
[10,12],
[20,25],
[15,25],
[25,28],
...
Ref:
https://www.chartjs.org/docs/latest/samples/bar/floating.html, https://www.chartjs.org/docs/latest/samples/bar/stacked.html
Related
When I make a Chartjs table the background is a plain square pattern. What I would like is to be able to mark the transition from one year to the next with a bolder vertical line at every new year.
In the below example chart, I have 12 quarters. I would like to have a line appear between the Q1s and Q4s. Is this possible?
chart_code = new Chart(ctx, {
type: 'line',
data: {
labels: ['Q1 15','Q2 15','Q3 15','Q4 15','Q1 16','Q2 16','Q3 16','Q4 16','Q1 17','Q2 17','Q3 17','Q4 17'],
datasets: [{
label: 'Teststatistic',
data: [50,40,30,20,50,20,10,10,10,40,30,80],
backgroundColor: ['rgba(0, 105, 146, 1)'],
borderColor: ['rgba(0, 105, 146, 1)'],
borderWidth: 3,
fill: false,
pointStyle: 'rect',
pointRadius: 5
}]
},
options: {
responsive: false,
plugins: {
legend: {
display: false,
boxWidth: 80,
boxHeight: 80
}
},
scales: {
x: {
ticks: {
maxRotation: 0,
minRotation: 0
}
}
}
}
I have a very simple (horizontal) bar chart using Chart.js latest version.
https://codepen.io/decho/pen/abZYrxO
It has 3 datasets, Foo, Bar & Baz. The problem is that when I hover with the mouse over a bar (dataset), all 3 of them get highlighted instead of just the one that mouse is over at.
Current behavior:
Expected behavior:
I have tried playing with the tooltip settings, but couldn't quite figure it out. So any idea on how can I achieve this?
Here is my current Chart configuration, also on Codepen:
const ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['Test'],
datasets: [
{
label: 'Foo',
data: [1],
backgroundColor: 'rgba(23, 83, 139, 0.5)',
borderColor: '#17538b',
borderWidth: 2,
hoverBackgroundColor: "#17538b",
hoverBorderColor: "#4444442b",
},
{
label: 'Bar',
data: [2],
backgroundColor: 'rgba(255, 85, 33, 0.5)',
borderColor: '#ff5521',
borderWidth: 2,
hoverBackgroundColor: "#ff5521",
hoverBorderColor: "#4444442b",
},
{
label: 'Baz',
data: [3],
backgroundColor: 'rgba(62, 211, 241, 0.5)',
borderColor: '#3ed3f1',
borderWidth: 2,
hoverBackgroundColor: "#3ed3f1",
hoverBorderColor: "#4444442b",
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
tooltips: {
mode: 'dataset',
intersect: true
},
scales: {
xAxes: [
{
display: true,
ticks: {
beginAtZero: true,
},
},
],
yAxes: [{
display: false,
ticks: {
beginAtZero: true,
},
}],
}
},
});
Any help is kindly appreciated.
Solved this myself: Apparently there is a a global option for hover modes:
options: {
hover: {
mode: 'dataset',
}
}
If anyone wonders as me, how this could be done for chart of type: 'line', just add these options:
options: {
elements: {
point: {
hitRadius: 1,
}
},
tooltips: {
mode: 'single',
},
hover: {
mode: 'dataset',
intersect: false
}
}
and also don´t forget to add colors for highlighting (for each dataset obviously):
datasets: [
{
label: "A",
data: [12, 19, 3, 5, 2, 3],
borderWidth: 3,
borderColor: '#ec5e5f',
hoverBorderColor: '#e41a1c',
pointHoverBackgroundColor: "#fff",
lineTension: 0.5,
}
]
For full example check out this codepen
I have been implementing a line chart design by using ChartJS (where I use an array of labels, rather than specific x and y values for each data point). I have been trying to change the font size of my x-axis labels without any luck. I have tried the following to set the x-axis ticks to the size I want them to be, but it doesn't change the font size of the x-axis labels:
options:{
scales:{
xAxis: [{
ticks:{
fontSize: 6,
}
}]
}
}
Here is the code that I have so far for my chart. Using the same method above, except for the yAxis, it changes the font size to what I need it to be. However, it does not do this for the xAxis.
var myChart= new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: ['Monday','Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets: [{
// dummy values: enter user-data here for caloric intake according to labels.
// Ex: data[0]=caloric intake on Monday, data[1]=caloric intake on Tuesday, etc...
data: [1200,1500,1600,1800,1400,600,1330],
borderColor:"rgba(0,150,255, 1)",
borderWidth: 3,
lineTension: 0,
pointBackgroundColor: "white",
pointBorderColor: "rgba(0,150,255, 1)",
pointBorderWidth: 3,
pointRadius: 4,
fill: false
}
],
},
options: {
responsive: true,
maintainAspectRatio: true,
tooltips:{enabled:false},
legend:{
display:false
},
scales:{
yAxes:[{
ticks:{
max:2000,
min:0,
fontColor: 'black',
fontSize: 8,
}
}],
xAxis:[{
ticks:{
fontColor:'black',
fontSize: 6,
}
}]
},
title: {
display: true,
// Can edit font-size
fontSize: 15,
fontColor: "black",
text: 'Calories'
},
annotation:{
events:["click"],
annotations:[
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: "Monday",
xMax: "Sunday",
yMin: 1200, // Enter lower-limit of goal here.
yMax: 1500, // Enter upper-limit of goal here.
backgroundColor: "rgba(0,255,0,0.5)",
borderColor: "rgb(0, 255, 0)",
borderWidth: 1,
onClick: function(e) {
console.log("Box", e.type, this);
}
}
]
}
}
});
Any help would be greatly appreciated.
Change xAxis => xAxes
xAxes:[{
ticks:{
fontColor:'black',
fontSize: 6,
}
}]
createLineChart() {
this.lineChartEl = new Chart(this.lineCanvas.nativeElement, {
type: 'line',
data: {
labels: [10, 11, 17, 18, 19, 23],
datasets: [
{
fill: true,
backgroundColor: '#C4CEE5',
label: 'recorded values',
borderColor: '#C4CEE5',
pointBorderColor: '#ffff',
pointBackgroundColor: '#ffff',
hoverBackgroundColor: '#C4CEE5',
pointRadius: 7,
borderCapStyle: 'square',
borderJoinStyle: 'round',
borderWidth: 1.5,
lineTension: 0,
data: [23, 34, 45, 12, 45, 65],
borderDash: [],
borderDashOffset: 0.0,
spanGaps: false,
}]
},
options : {
legend: {
display: false,
position: 'top',
fullWidth: true,
},
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 20,
scaleStartValue: 0,
scales: {
yAxes: [{
ticks: {
suggestMax: max,
maxTicksLimit: 4,
beginAtZero: true,
padding: 30
},
}],
xAxes: [{
ticks: {
min: 0,
maxTicksLimit: 5,
autoSkip: false,
beginAtZero: true,
},
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
day: 'MMM D'
},
},
gridLines : {
display : false,
drawBorder: false,
color: 'transparent',
},
}]
},
},
});
};
I have created a chart.js line chart where the values on the x axis are dates. I think by default, chart.js plots data with an equal amount of distance between the points regardless of the value of the data.
I would like it so there is a large space in the chart if the dates are further apart.
I have tried using chart-scatter the plugin for chart.js but have not had much luck as I am using ionic/angular but if you have any experience with it that would be great!
What I would like the chart to look like with more space depending on the x-axis value:
Simple Setup:
I have a RoR Application and a ChartJS Line Diagramm.
I want to add a Picture at a specific place but also text.
In the progress of the RoR Application answers of users will show up after time. Later the answer of two people will be shown, who is closer to the Average.
In my case I only need to know how a Picture could rendered inside.
Picture What it should look like
Here is my actual Code:
var points = [];
var data = {
datasets: [{
label: 'Antworten',
data: points,
radius: 6,
borderColor: "#000000",
borderWidth: 2,
backgroundColor: "#FF0000"
},
{
label: "",
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,0,0,1)",
borderColor: "rgba(0,0,0,1)",
borderCapStyle: 'butt',
borderDash: [0],
borderDashOffset: 0.0,
showLine: true,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(0,0,0,1)",
pointBackgroundColor: "rgba(1,0,0,1)",
pointBorderWidth: 8,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(0,0,0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointStyle: "circle",
pointHitRadius: 10,
data: [{
x: 0,
y: 0
},{
x: 100,
y: 0
}],
borderColor: "#000000",
borderWidth: 5,
backgroundColor: "#FF0000"
}
]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, {
type: 'line',
data,
options: {
legend: {
display: false
},
showLines: false,
scales: {
xAxes: [{
type: 'linear',
gridLines: {
display: false
},
position: 'bottom',
ticks: {
max: 100,
min: 0,
stepSize: 10
}
}],
yAxes: [{
display: false,
ticks: {
max: 1,
min: 0,
stepSize: 1
}
}]
}
}
});
};
Found an Answer:
Here my solution
var user_a = new Image();
user_a.src = 'http://i.imgur.com/fwhrCBs.png';
var data = {
datasets: [
{
label: 'Spieler 1',
data: user_a_answer,
radius: 1,
borderColor: "#000000",
borderWidth: 2,
pointStyle: user_a,
}]