Is there a way to remove the initial vertical line from the chart without removing the values?
here is how my options look like:
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
maxTicksLimit: 5,
suggestedMax: maxValue
}
}],
xAxes : [{
categoryPercentage: 1.0,
display : false, // set this to false to hide the labels under the bars
gridLines: {
display: false
}
}]
},
What you want to remove is probably the border of the chart. In Chart.js v2 I was able to remove this first vertical border by setting drawBorder to false for the grid line configuration:
options: {
scales: {
yAxes: [{
gridLines: {
drawBorder: false
}
}]
}
}
In Chart.js docs it is explained in https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration.
Try using the chart option, scaleLineColor, and setting the color to have 0 opacity:
new Chart(ctx).Bar(data, {
scaleLineColor: 'rgba(0, 0, 0, 0)',
});
http://jsfiddle.net/wb3kcunt/33/
If you are using chartjs v2, then the showBorder option in scales.gridLines should do the trick:
options: {
scales: {
gridLines: {
showBorder: false,
}
}
}
See docs: http://www.chartjs.org/docs/#scales
Related
Is there a way to set a different color for chart tick line and gridlines color, using chart.js 3.x? When I change the gridline color then tick color also changes, I want to have a different color for the tick and gridlines.
I tried with the below config, but it changes color for both tick and gridlines.
var config = {
type: 'line',
data: {
datasets: [],
},
options: {
scales: {
xAxes: {
ticks: {
beginAtZero: true
},
gridLines: {
color: "#FFFF00",
zeroLineColor: "#00FFFF",
zeroLineWidth: 1
}
},
yAxes: {
ticks: {
beginAtZero: true
},
gridLines: {
color: "#FFFF00",
zeroLineColor: "#00FFFF",
zeroLineWidth: 1
}
}
}
}
};
How to use scriptable options to set a different color for tick and gridline?
An easy way is to set Chart.defaults.borderColor to a new value before drawing your chart.
For example:
Chart.defaults.borderColor = "rgba(255,255,255, .2)"; // White translucent, good for dark themes
let chart_options = {
type: 'bar',
data: {
labels: labels,
datasets: [{
data: data_points,
backgroundColor: colors
}]
}
}
var ctx = document.getElementById('some-chart').getContext('2d');
new Chart(ctx, chart_options);
I'm making a stacked bar graph using Chart.js, with (total stacked) values ranging from 0 to 1 (displayed as 0-100%). I'd like to have a tick/gridline displayed every 0.20/20%, from 0 to and including 1/100%.
Right now, my chart will display the last gridline at 1/100% if I don't include a graph title, but will hide the gridline (but still have the tick label) if I display the title.
Any tips to get the gridline to show?
JS fiddle here: https://jsfiddle.net/amyzlc/n99xac76/, and relevant graph code below.
Link to image of graph with title and without top gridline here.
var stackedBar = new Chart(ctx, {
type: 'bar',
data: dataChart,
options: {
title: {
display: true, //top gridline displays if false, not if true
text: 'Month-wise Adherence'
},
legend: {
position: 'bottom'
},
scales: {
xAxes: [{
stacked: true,
gridLines: {display: false}
}],
yAxes: [{
stacked: true,
gridLines: {drawBorder: false, tickMarkLength: 3},
ticks: {
min: 0,
max: 1, //not showing with title
padding: 6,
stepSize: 0.2,
callback: function(value) {
return Math.round(value*100).toString() + "%";
}
}
}]
}
}
});
Thanks!
I am using primeng chart component which uses chartjs. We are using chartjs 2.5.0 alongside primeng 4.0 and angular 4.
I created a dynamic chart and I put the data into chart after it came to us through some services. The problem is, after a while chartjs will put a gap at first and end of the chart.
Here is our options for chartjs:
this.options = {
responsive: true,
tooltips: {
mode: 'index',
intersect: false, // all points in chart to show tooltip
callbacks: { // adding labels as title in tooltip
title: function(tooltipItems, data) {
let date = tooltipItems[0].xLabel;
return me._rhDatePipe.transform(date, 'time');
}
}
},
hover : {
mode: 'index',
intersect: false
},
scales: {
xAxes: [{
type: 'time',
display: false, // preventing labels from being displayed
max: 20
}],
yAxes: [{
ticks: {
maxTicksLimit: 3
}
}]
}
}
and here is our first data settings:
this.data = {
labels: this.labels, // current time as label
datasets: [
{
label: me._messageService.translate('chart-label-buy'),
data: this.buyingData,
fill: false,
borderColor: "#2453db",
lineTension: 0,
borderWidth: 1.5,
radius: 0 // removing dot points on chart
},
{
label: me._messageService.translate('chart-label-sale'),
data: this.sellingData,
fill: false,
borderColor: "#f44336",
borderWidth: 1.5,
lineTension: 0,
radius: 0 // removing dot points on chart
},
{
label: me._messageService.translate('chart-label-last-trade'),
data: this.lastPriceData,
fill: false,
borderColor: "#000000",
lineTension: 0,
borderWidth: 1.5,
radius: 0 // removing dot points on chart
}
]
}
and here is the loop which will update the chart:
if(sortedKeysList != null) {
for(let key in sortedKeysList) {
let currentTime: number = sortedKeysList[key];
// just add new points
if(!this.currentTimes.includes(currentTime)) {
let date = new Date(currentTime);
this.labels.push(date);
this.currentTimes.push(currentTime);
this.buyingData.push(this.bestLimitsChart[currentTime].buy);
this.sellingData.push(this.bestLimitsChart[currentTime].sale);
if(this.bestLimitsChart[currentTime].price != 0)
this.lastPriceData.push(this.bestLimitsChart[currentTime].price);
else
this.lastPriceData.push(null);
this.updateChart();
}
}
}
and the picture of chart:
I do not know what is going on. Any helps will greatly appreciated.
I finally found the problem,
for other people facing this issue, you can add unit to your axis:
xAxes: [{
type: 'time',
time: {
displayFormats: {
minute: 'h:mm', // formatting data in labels
},
unit: 'minute' // destroy first and end gaps
},
display: false, // preventing labels from being displayed
}],
similar issue on github:
https://github.com/chartjs/Chart.js/issues/2277#issuecomment-314662961
I am creating a stacked bar chart using Chart.js. However, I cannot find in the documentation how to change some things.
How to add a label on the Y axis.
How to shorten the label on the X axis so it displays only
the first 10 letters.
How to reverse the order in which the values are shown in
the tooltip.
Are these thigs are possible to implement?
I have marked what I want to change here.
Here are what my chart options look like now:
var ctx = $("#newchart");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata,
options: {
barValueSpacing: 20,
tooltips: {
enable: true,
mode: 'label',
callbacks: {
label: function(tooltipItem, data){
var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + ': ' + Number(tooltipItem.yLabel) + ' Users';
}
}
},
responsive: true,
segmentShowStroke: true,
scales: {
xAxes: [{
display: false,
stacked: true,
ticks:{
stepSize : 10,
},
gridLines: {
lineWidth: 0,
color: "#9E9E9E"
}
}],
yAxes: [{
stacked: true,
ticks: {
min: 0,
stepSize: 10,
},
gridLines: {
lineWidth: 0,
color: "#9E9E9E"
}
}]
}
}
});
1. Adding a Y-axis label
in the yAxes object give it a scaleLabel object that takes in labelString (example fiddle)
yAxes: [{
scaleLabel: {
labelString: 'Value'
}
}]
2. Shortening xAxis category labels
For this, you can pass a userCallback function to the xAxis ticks object that can return your desired output. The function will take in the original label in its first parameter so you can just return a substring at your desired length, example fiddle
xAxes: [{
ticks: {
userCallback: function(label, index, labels) {
if(typeof label === "string")
{
return label.substring(0,1)
}
return label;
},
}
}],
3. reverse tooltip order
The tooltips object accepts a function called itemSort that can be passed to Array.prototype.sort.
So you could so something like below, but you may also need to compare the objects index as well as the datasetIndex to get your desired result. (example fiddle)
tooltips: {
mode: 'label',
itemSort: function(a, b) {
return b.datasetIndex - a.datasetIndex
},
},
I'm attempting to create a bar chart that stacks the bars for three respective data series. I'm using Chart.js with angular charts. I have the stacked property set accordingly with: stacked: true, yet the bars do not align with one another vertically.
Basically, my question is: how do I make the data from each series line up so that the bars are of uniform width but with staggered colors vertically?
Here's some of my chart configuration code:
$scope.barLabels = ['-120 to -80', '-80 to -70', '-70 to -60', '-60 to -50', '-50 to -10'];
$scope.barData = [
[3, 9, 2, 11, 5],
[6, 9, 2, 11, 5],
[2, 1, 2, 4, 5]
];
$scope.barOptions = {
legend: {
display: false
},
scales: {
yAxes: [
{
stacked: true,
display: true,
position: 'left',
ticks: {
beginAtZero: true,
min: 0
}
}
]
}
};
You should also set stacked: true for the x-axis. Your scales should, therefore, look like this:
...
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true,
display: true,
position: 'left',
ticks: {
beginAtZero: true,
min: 0
}
}]
}
...
Have a look at Bar Chart Options and at the first code sample of the section. In this code sample, stacked: true is set for both axes, x-axis and y-axis. This will get you a stacked bar chart as you want it.