We Keep Coding

Can't get lower values to display clearly with wide range [duplicate]

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>

How to remove only one specific dataset label chartJS?

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>

Javascript window.onload function not loading for multiple charts with Chart.js

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);
};

Chart.js - Draw charts with opposite bars - How to set both the y-axis ends to positive number?

I want to draw a chart with opposite bars like this (please ignore the yellow part):
This is my attempt using Chart.js:
You can see that there are 2 things need to be fixed:
The blue and red bar should be stacked
Both ends of the y-axis should show positive numbers
How can I achieve those ?

You can use the stacking and custom ticks feature to produce the result you want.
Sample JS Fiddle
var ctx = document.getElementById('wrapper').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
stack: 'a'
}, {
label: "My Second dataset",
backgroundColor: 'rgb(2, 99, 132)',
borderColor: 'rgb(2, 99, 132)',
data: [-10, -110, -15, -12, -120, -130, -145],
stack: 'b'
}]
},
// Configuration options go here
options: {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
ticks: {
callback: function (value, index, values) {
return value < 0 ? -value : value;
}
}
}]
}
}
});

How to display tool tip always in line chart

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"
}