Information:
Chart.js v3.8.2
https://www.chartjs.org
new Chart(document.getElementById('esneklik').getContext('2d'), {
type: 'bar',
data: {
labels: ['test','test 2'],
datasets: [{
label: ' ',
data: [24,20],
backgroundColor: ['rgba(1, 56, 108, 0.6)'],
borderColor: ['rgba(1, 56, 108, 1'],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
type: 'linear',
min: 5,
max: 50
}
}
}
});
Example:
enter image description here
I want to draw a line horizontally and show the average value.
you can add a second dataset for the line.
specify the type as 'line' and set fill to false
datasets: [{
type: 'line', // <-- type as line
label: 'avg',
data: [22,22],
fill: false, // <-- fill as false
backgroundColor: 'red',
borderColor: 'red',
borderWidth: 1
}, {
label: 'bar',
data: [24,20],
backgroundColor: 'rgba(1, 56, 108, 0.6)',
borderColor: 'rgba(1, 56, 108, 1)',
borderWidth: 1
}]
the line dataset should be added first, else it will be behind the bars
see following working snippet...
$(document).ready(function() {
new Chart(document.getElementById('esneklik').getContext('2d'), {
type: 'bar',
data: {
labels: ['test','test 2'],
datasets: [{
type: 'line',
label: 'avg',
data: [22,22],
fill: false,
backgroundColor: 'red',
borderColor: 'red',
borderWidth: 1
}, {
label: 'bar',
data: [24,20],
backgroundColor: 'rgba(1, 56, 108, 0.6)',
borderColor: 'rgba(1, 56, 108, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
beginAtZero: true,
type: 'linear',
ticks: {
min: 5,
max: 50
}
}]
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="esneklik"></canvas>
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 been looking for the mistakes I may have made in my codes but still, the horizontal line does not appear on my graph somehow. Is it because of my double y-axis graph?
Below is my code for the graph:
var canvas = document.getElementById('chart').getContext("2d");
new Chart(canvas, {
type: 'line',
data: {
labels: ['Morning 6am-12pm', 'Afternoon 12pm-4pm', 'Evening 4pm-7pm', 'Night 7pm-12am', 'Dawn 12am-6am'],
datasets: [{
label: 'Temperature',
yAxisID: 'A',
data: [30, 32, 33, 31, 30]
}, {
label: 'Humidity',
yAxisID: 'B',
data: [80, 77, 74, 79, 83],
lineTension: 0.3,
fill: false,
borderColor: 'lightblue',
backgroundColor: 'transparent',
pointBorderColor: 'lightblue',
pointBackgroundColor: 'lightgreen',
pointRadius: 5,
pointHoverRadius: 15,
pointHitRadius: 30,
pointBorderWidth: 2
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 100,
min: 0
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 32,
borderColor: 'rgb(75, 0, 0)',
borderWidth: 4,
label: {
enabled: false,
content: 'Test label'
}
}]
}
}
});
And this is the result of my graph:
You've changed the ID of the y-axes to A and B:
yAxes: [{
id: 'A',
...
}, {
id: 'B',
...
In the annotation plugin configuration you tell it to draw on y-axis-0 (which is the default ID):
annotation: {
annotations: [{
scaleID: 'y-axis-0',
...
Change the configuration to whichever y-axis you want to draw the annotation to:
scaleID: 'A'
Edit: Working example with Chart.js 2.7.2
var canvas = document.getElementById('chart').getContext("2d");
new Chart(canvas, {
type: 'line',
data: {
labels: ['Morning 6am-12pm', 'Afternoon 12pm-4pm', 'Evening 4pm-7pm', 'Night 7pm-12am', 'Dawn 12am-6am'],
datasets: [{
label: 'Temperature',
yAxisID: 'A',
data: [30, 32, 33, 31, 30]
}, {
label: 'Humidity',
yAxisID: 'B',
data: [80, 77, 74, 79, 83],
lineTension: 0.3,
fill: false,
borderColor: 'lightblue',
backgroundColor: 'transparent',
pointBorderColor: 'lightblue',
pointBackgroundColor: 'lightgreen',
pointRadius: 5,
pointHoverRadius: 15,
pointHitRadius: 30,
pointBorderWidth: 2
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 100,
min: 0
}
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'A',
value: 32,
borderColor: 'rgb(75, 0, 0)',
borderWidth: 4,
label: {
enabled: false,
content: 'Test label'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="chart"></canvas>
I'm using http://www.chartjs.org/ library for charts where I try to display 6 different data points on Y axis.
It's a bit mess when everything is displayed at the same time, but I do not want to split it into multiple charts as all these data correlate.
I wonder if it's possible to set which data should be hidden when the chart loads and then I could show the remaining ones myself.
Also is it possible to save these settings somehow? Let's say I want to display only 3 types of data and after I reload the page it would remember my preference.
EDIT: Here is the current code if it helps..
<canvas id="statsByDayChart" width="400" height="300"></canvas>
<script>
var ctx = document.getElementById('statsByDayChart').getContext('2d');
var profit = {
label: "Profit",
data: {!! json_encode($profit) !!},
borderColor: 'rgba(73, 189, 138, 1)',
borderWidth: 3,
backgroundColor: 'rgba(219, 242, 232, 0)',
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-profit',
type: 'line'
};
var cost = {
label: "Cost",
data: {!! json_encode($cost) !!},
borderColor: 'rgba(255, 0, 0, 1)',
borderWidth: 2,
backgroundColor: 'rgba(255, 0, 0, 0)',
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-cost',
type: 'line'
};
var ctr = {
label: "CTR",
data: {!! json_encode($ctr) !!},
borderColor: 'rgba(255, 126, 0, 1)',
borderWidth: 3,
backgroundColor: 'rgba(255, 126, 0, 0)',
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-ctr',
type: 'line'
};
var holds = {
label: "Holds",
data: {!! json_encode($holds) !!},
borderColor: 'rgb(175, 26, 245, 1)',
backgroundColor: 'rgb(175, 26, 245, 1)',
borderWidth: 4,
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-holds',
type: 'bar',
fill: true
};
var conversions = {
label: "Conversions",
data: {!! json_encode($conversions) !!},
borderColor: 'rgb(54, 162, 235, 1)',
backgroundColor: 'rgb(54, 162, 235, 1)',
borderWidth: 5,
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-conversions',
type: 'bar',
fill: true
};
var impressions = {
label: "Impressions",
data: {!! json_encode($displays) !!},
borderColor: 'rgba(254, 206, 96, 1)',
backgroundColor: 'rgba(255, 231, 175, 0.8)',
borderWidth: 6,
pointBorderWidth: 4,
borderDash: [20, 6],
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-impressions',
type: 'line',
fill: true
};
var chartData = {
labels: {!! json_encode($days) !!},
datasets: [profit, cost, ctr, holds, conversions, impressions]
};
var lineChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
legend: {display: true},
responsive: true,
maintainAspectRatio: false,
elements: { line: { tension: 0.05 } },
scales: {
xAxes: [{ gridLines: { display: true, offsetGridLines: false }, barPercentage: 1, categoryPercentage: 0.4 }],
yAxes: [
{
id: 'y-axis-profit',
type: 'linear',
gridLines: { display: true },
ticks: { beginAtZero: true, min: {{ $profit->min() }}, max: {{ $profit->max() }} },
display: true
},
{
id: 'y-axis-cost',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $cost->min() }}, max: {{ $cost->max() }} },
display: false
},
{
id: 'y-axis-ctr',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $ctr->min() }}, max: {{ $ctr->max() }} },
display: false
},
{
id: 'y-axis-holds',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $holds->min() }}, max: {{ $holds->max() }} },
display: false,
},
{
id: 'y-axis-conversions',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $conversions->min() }}, max: {{ $conversions->max() }} },
display: false,
},
{
id: 'y-axis-impressions',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $displays->min() }}, max: {{ $displays->max() }} },
display: false
}
]
},
tooltips: { mode: 'index', intersect: false },
hover: { mode: 'nearest', intersect: true },
}
});
</script>
Chart work fine butt can't see tooltips…
I cant find where problem is and what I missing…
<div style="width: 1000px; height: 600">
<canvas id="myChart" ></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myNewChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["24.5.2018. 15:23:48", "24.5.2018. 16:00:00", "24.5.2018. 17:00:00", ],
datasets: [{
label: '# Temperature',
fill: false,
data: [29, 25, 24, ],
backgroundColor: [
],
borderColor: [
],
borderWidth: 1
}, {
label: '# Humidity',
data: [54, 62, 64, ],
borderColor: [
],
borderWidth: 1,
fill: false,
type: 'line'
}
]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'rgb(60, 180, 100)'
}
},
tooltips: {
cornerRadius: 4,
caretSize: 4,
xPadding: 16,
yPadding: 10,
backgroundColor: 'rgba(0, 150, 100, 0.9)',
titleFontStyle: 'normal',
titleMarginBottom: 15
}
}
});
</script>
Helper seed that I need add more text for posting this but dont konw how simple question make longer…. text text Helper seed that I need add more text for posting this but dont konw how simple question make longer….
Try this one
<div style="width: 1000px; height: 600">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myNewChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["24.5.2018. 15:23:48", "24.5.2018. 16:00:00", "24.5.2018. 17:00:00", ],
datasets: [{
label: '# Temperature',
fill: false,
data: [29, 25, 24, ],
borderWidth: 1
}, {
label: '# Humidity',
data: [54, 62, 64, ],
borderWidth: 1,
fill: false,
type: 'line'
}]
},
options: {
legend: {
display: true,
position: 'top',
labels: {
boxWidth: 80,
fontColor: 'rgb(60, 180, 100)'
}
},
tooltips: {
cornerRadius: 4,
caretSize: 4,
xPadding: 16,
yPadding: 10,
backgroundColor: 'rgba(0, 150, 100, 0.9)',
titleFontStyle: 'normal',
titleMarginBottom: 15
}
}
});
</script>
Just remove backgroundColor: [] and borderColor: [] from both datasets
I am trying to build a barchart with chartjs where there should be no space between neighbouring bars. The problem i have is that I don't get rid of the borders between the bars:
Bars with borders
This is my config:
new Chart($('#weekly-availabilities-chart'), {
type: 'bar',
data: {
labels: ...,
datasets: [
{
backgroundColor: 'rgba(153, 193, 72, 0.4)',
label: 'label a',
borderWidth: 0,
data: dataset_1
}, {
backgroundColor: 'rgba(13, 39, 73, 0.4)',
label: 'label b',
borderWidth: 0,
data: dataset_2
}
]
},
options: {
scales: {
xAxes: [
{
barPercentage: 1,
categoryPercentage: 1,
gridLines: {
display: false
}
}
],
yAxes: [
{
stacked: true,
gridLines: {
color: 'rgba(0,0,0,0.05)'
},
ticks: {
beginAtZero: true,
max: 40
}
}
]
}
}
});
use borderWidth: 0 in your datasets.
datasets: [
{
backgroundColor: 'rgba(153, 193, 72, 0.4)',
label: 'label a',
data: dataset_1,
borderWidth: 0
}, {
backgroundColor: 'rgba(13, 39, 73, 0.4)',
label: 'label b',
data: dataset_2,
borderWidth: 0
}
]