I have two datasets in datasets array and they have labels like My first dataset and My second dataset.I only want to show My first dataset label.I researched on the internet and only could find how to remove all or not.
Here jsFiddle : http://jsfiddle.net/yj6mqu4r/
In the options, add the following:
options: {
legend: {
labels: {
filter: function(label) {
if (label.text == 'My first dataset') return true;
}
}
}
}
See the following snippet:
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My first dataset",
data: [65, 0, 80, 81, 56, 85, 40],
fill: false
}, {
label: "My second dataset",
data: [60, 20, 50, 41, 36, 25, 80],
fill: false
}]
},
options: {
legend: {
labels: {
filter: function(label) {
if (label.text == 'My first dataset') return true;
}
}
}
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.js"></script>
Related
I want to create a chart from chart js library. The code of script of bar chart is written in some .js file means its not in html now I want to add that script inside my html when i do it then chart not get prepared then I tried window.onload=function(){Here is the code snippet of chartjs dataset}. This working fine one chart prepared but I want it 4 times same chart with different ids then it not work it only print chart in last div
window.onload = function () {
window.myBar = new Chart(document.getElementById("bars1"), {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Bags",
backgroundColor: "#7e3af2",
// borderColor: window.chartColors.blue,
borderWidth: 1,
data: [66, 33, 43, 12, 54, 62, 84, 100],
},
],
},
options: {
responsive: true,
legend: {
display: false,
},
},
});
};
<div class="min-w-0 p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
<h4 class="mb-4 font-semibold text-gray-800 dark:text-gray-300">
Bars
</h4>
<canvas id="bars1"></canvas>
<div class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400">
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
same chart i want 4 times if i paste this same div below this div with different id in canavs tag and getelementbyid then it wont work only last div chart get printed
Explained
does this solve your problem? if not please provide more details
let ids = ['bars1', 'bars2', 'bars3', 'bars4']
ids.forEach(id => {
window.myBar = new Chart(document.getElementById(id), {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Bags",
backgroundColor: "#7e3af2",
// borderColor: window.chartColors.blue,
borderWidth: 1,
data: [66, 33, 43, 12, 54, 62, 84, 100],
},
],
},
options: {
/* to remove the legend */
plugins: {
legend: {
display: false,
},
},
responsive: true,
},
});
})
<canvas id="bars1"></canvas>
<canvas id="bars2"></canvas>
<canvas id="bars3"></canvas>
<canvas id="bars4"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
you can just store the ids of all the canvas elements and loops over that array while adding a chart to the respective element with the id
<canvas id="bars1"></canvas>
<canvas id="bars2"></canvas>
<canvas id="bars3"></canvas>
<canvas id="bars4"></canvas>
<script>
window.onload = function(){
const ids = ['bars1', 'bars2', 'bars3', 'bars4']
ids.forEach((id) => {
window.myBar = new Chart(document.getElementById(id),
{
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Bags',
backgroundColor: '#7e3af2',
// borderColor: window.chartColors.blue,
borderWidth: 1,
data: [66, 33, 43, 12, 54, 62, 84,100],
},
],
},
options: {
responsive: true,
legend: {
display: false,
},
},
}
)
}
})
</script>
I have a dataset in which the last value is always very high. This causes an issue with my bar chart; almost all the other values are hard to get a feeling for without hovering over them.
Here is a screenshot:
This is what I am trying to achieve;
So my question; is this possible within vanilla Chart.js or do I need a plugin? And if so; is there an existing plugin or do I need to write one myself?
I am also open for alternative solutions to the initial problem.
I've looked all over the internet for something like this but unfortunately without much luck.
You can use logarithmic type yAxis
Default: linear
https://www.chartjs.org/docs/latest/axes/cartesian/logarithmic.html
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: "Series 1",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 43, 81, 56, 950],
}]
},
options: {
scales: {
yAxes: [{
type: 'logarithmic',
ticks: {
callback: function(tick, index, ticks) {
return tick.toLocaleString();
}
}
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="400" height="200"></canvas>
Optimized ticks
50 * (Math.floor(i / 50)), // lower 50
50 * (Math.ceil(i / 50)) // higer 50
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: "Series 1",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
borderWidth: 2,
hoverBackgroundColor: "rgba(255,99,132,0.4)",
hoverBorderColor: "rgba(255,99,132,1)",
data: [65, 59, 43, 81, 56, 950],
}]
},
options: {
scales: {
yAxes: [{
type: 'logarithmic',
ticks: {
callback: function(tick, index, ticks) {
return tick.toLocaleString();
}
},
afterBuildTicks: function(pckBarChart) {
pckBarChart.ticks = pckBarChart.chart.data.datasets[0].data.flatMap(i => [
50 * (Math.floor(i / 50)), // lower 50
50 * (Math.ceil(i / 50)) // higer 50
])
}
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<canvas id="myChart" width="400" height="200"></canvas>
I'm using Chart.js to display some charts.
When I use the onload function for the pie chart it loads correctly on the page, when I add a second variable to onload for bar-chart, nothing will display.
My javascript code looks like this
var config = {
type: 'pie',
data: {
datasets: [
{
data : [10, 30, 40, 50],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#65b13b",
],
}],
labels: ["4G", "5G", "Mano"],
},
options: {
responsive: true
}
};
var barChartData = {
type: 'bar',
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
options: {
responsive: true
},
};
window.onload = function() {
var ctx = document.getElementById("pie-chart").getContext("2d");
window.myPie = new Chart(ctx, config);
};
var bctx = document.getElementById("bar-chart").getContext("2d");
window.myBar = new Chart(bctx, barChartData);
};
My html code looks like this:
<canvas id="bar-chart" class="chart-holder" height="250" width="538"></canvas>
<canvas id="pie-chart" class="chart-holder" height="250" width="538"></canvas>
I've looked at other solutions but they are all very complicated and I feel like it's only something simple.
The bar-chart code is outside the window.onload function. Put that inside the window.onload function:
window.onload = function() {
var ctx = document.getElementById("pie-chart").getContext("2d");
window.myPie = new Chart(ctx, config);
var bctx = document.getElementById("bar-chart").getContext("2d");
window.myBar = new Chart(bctx, barChartData);
};
enter image description hereI am trying to display vertical line in a line chart using chart.js. I am using the fiddle as a reference.
var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
ctx.strokeStyle = '#ff0000';
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
ctx.stroke();
ctx.restore();
}
}
});
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 0, 80, 81, 56, 85, 40],
fill: false
}],
lineAtIndex: 2
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
In this I would like to pass the value to line At Index dynamically and also I would like to gray out the graph till that vertical line. For example if the line is at position 3, I want to apply some color till that position.
You can split the dataset into 2 and just set the fill property for the section with area to true, and the one without area to false. Your new dataset would appear as follows:
datasets: [{
label: "My First dataset",
data: [65, 0, 80],
fill: true
}, {
label: "My First dataset",
data: [null, null, 80, 81, 56, 85, 40],
fill: false
}
]
I have searched in google and was not able to find how to display tool tip in line chart. I am using angular-chart.js.
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.options = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
},
{
id: 'y-axis-2',
type: 'linear',
display: true,
position: 'right'
}
]
}
};
});
HTML
<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick">
</canvas>
I am searching similar kind of this, which displays percentage on the tool tip.
I have tried the below options.(found in the angular-js issues). But its not working.
var options = {
scaleShowLabelBackdrop : true,
scaleShowLabels : true,
scaleBeginAtZero : true,
scaleLabel : "Percent",
multiTooltipTemplate: "10% achieved"
}