I am trying to set up Chart.js in a django app using vertical bars, but I am having trouble using the labels. My data is withing the range [-100;+100] and I would like to be able to show one label on top of the chart and another one at the bottom.
Right now I only manage to put label at the bottom of the chart ..
enter image description here
and would need it to look like that :
enter image description here
any idea how to achieve that ?
Raphael
Inside of the options object, add two xAxes scales:
scales: {
xAxes: [{
display: true,
position: 'top'
},{
display: true,
position: 'bottom'
}]
}
There are a lot of examples on the website and github
Related
I am working with Highcharts Bar Graph (vertical) and I would like to have the Members data to appear on top of each bar (hovers we will keep as well which is working). I've tried various ways with plotOptions and could not get this to work to show Members data on top of the bar graph view. The first link is my working code.
**https://codepen.io/jenfloods/pen/jOyXEQd**
The second link above is the example is how I would like the data text to appear on top of a bar graph with white shadow letters but this would apply to my vertical bars and not horizontal as this example shows.
**https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/bar-datalabels-align-inside-bar/**
Anyone has an example or can work with my code to make it happen?
You need to enable data labels for series and use the configuration like below:
plotOptions: {
series: {
...,
dataLabels: {
rotation: 90,
verticalAlign: 'top',
y: 10,
align: 'left',
inside: true,
enabled: true,
color: '#FFFFFF'
},
}
}
Live demo: http://jsfiddle.net/BlackLabel/y04j6z3m/
API Reference: https://api.highcharts.com/highcharts/plotOptions.column.dataLabels
I created a horizontal bar chart w/ chart.js and need to create two set of labels on the y-axis but can only create one.
As an example, see image below, on the y-axis I have a grouping of words 'other' and 'paper' with counts of 2 and 3 respectively; in that grouping and the two below I also need to display the month associated with those two words - like May.
Is there a way to do this?
P.S.
In the image attached I have mirroring set to true but am open to turning mirroring off if the solution will give me the output I need.
So far I have reviewed these pages and tried using the labelString option:
https://www.chartjs.org/docs/latest/axes/labelling.html
Horizontal Stacked Bar Chart with Two Y Axis Issues
Horizontal bar chart in chart.js
Update:
I resolved this issue by using labelString - see chart.js docs for details.
In particular:
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
ticks: {
beginAtZero: true,
display: true,
mirror: true,
},
scaleLabel: {
display: true,
labelString: [
var0+' '+
var1+' '+
var2
]
}
}]
This is a bit of a hack as I needed to add 18 spaces between var0 and var1 but reviewed on multiple devices and it works.
If someone else found a different solution please share. If not, I hope this helps someone.
Image of update below - with months now on the y-axis:
I was looking at this highchart stacked column - Highchart Demo
and I'm wondering if it's possible to have a tooltip when you mouse over the total stacked label.
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
}
}
I wanted to achieve something like this - See Image here.
Note: I wanted to have a tooltip on mouseover the Total Stacked Label not on the column series.
You can use a custom-events plugin which allows to cache events on stackLabels.
I'm using Chart.js pie chart with tooltips which being cut for some reason.
Screenshot attached, didn't found any attribute/option to take care of it..
Is there anyway to take care of it?
Thanks!
This improper cutoff was raised as issue#622 in the Github repository for ChartJS.
This was determined to be a bug (evidently this bug hasn't yet been fixed)
https://github.com/nnnick/Chart.js/issues/622
In response to that issue, Robert Turrall has a solution which he says is a good workaround. Here is his proposed fix:
I'm sure that this is due to the fact that the tooltips are generated
within the confines of the canvas, making it difficult to fix.
I had the same issue on my doughnut chart and solved it by
implementing custom tooltips as per the example on the samples folder
- worked in conjunction with my existing tooltip fontsize and template settings in the chart initialisation code:
var myDoughnutChart = new Chart(donut).Doughnut(donutdata, {
tooltipFontSize: 10,
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>hrs",
percentageInnerCutout : 70
});
Check out samples/pie-customTooltips.html for the custom tooltip code.
Copy/paste and it worked straight away. Very happy!
Tooltip displayed well outside the bounds of the canvas:
PS: there's a line chart example too, which I'm guessing will work
fine with bar charts.
You can add internal padding to the chart. For instance in my case I had a cut of tooltips on the right.
options: {
responsive: true,
maintainAspectRatio: false,
cutoutPercentage: 60,
legend: {
display: false
},
animation: {
animateRotate: false
},
layout: {
padding: {
right: 40
}
}
}
I found a workaround for this. I have blank labels on my x axis, so I just added a label with several spaces in it for the last label entry. That caused ChartJS to leave enough space for the label to fit, which also leaves enough room for the tooltip to fit.
In addition, I have large circles for my data points and the last one on the right was getting clipped before. Adding the extra space to the label also fixed that.
Here is the code where I create my labels. The ratings is my actual data defined earlier:
// Add blank labels and "Today"
for (i=0; i<ratings.length; i++) {
labels.push("");
}
labels[ratings.length-1] = " ";
var data = {
labels: labels,
datasets: [
{
label: "Progress",
strokeColor: "rgba(255,165,0,1.0)",
pointColor: "white",
pointStrokeColor: "rgba(255,165,0,1.0)",
pointHighlightStroke: "#B87700",
data: ratings
}
]
};
Even if you have actual labels on your graph, you could add spaces to your last label to make it bigger. If you are centering your label, you could add the same amount of space before and after.
Obviously there will be limits where this will or won't work for you, but for my case I added 7 spaces and all looks good now.
Also, my case had an issue on the right side, whereas this question has an issue with the left side. The same fix should work, but putting the space on the first label.
It seems like Chart.js can't figure out which direction to show the tooltip because it can't detect the size of the tooltip element when it extends beyond the canvas.
In my scenario I fixed it by squeezing the text inside this particular tooltip closer with these options for the tooltip options object:
tooltips.titleMarginBottom = 1;
tooltips.bodySpacing = 1;
tooltips.yPadding = 2;
Wierdly enough Chart.js then correctly decides to show the tooltip to the left of the mouse and not below.
Would be cool if you could choose which direction the tooltip appears compared to the mouse.
In my case, I was able to work around this issue by reducing the amount of text in the tooltip. I did so using custom tooltip callbacks to specify the label text. My initialization looked like this:
var chart = new Chart(canvas.getContext("2d"), {
type: 'line',
data: chartData,
options: {
responsive: true,
tooltips: {
callbacks: {
title: function(tooltipItems, data) {
return tooltipItems[0].xLabel;
},
label: function(tooltipItems, data) {
return tooltipItems.yLabel;
},
}
},
},
});
There appears to be a fix available that hasn't yet been merged into the project: https://github.com/chartjs/Chart.js/pull/1064
Interestingly, by the setting the tooltipCaretSize option to 0 solves the issue.
{ tooltipCaretSize: 0, ... }
I'm new with Google Charts and I am not able to obtain a fine result with the texts surrounding the graph.
This is how my chart looks:
As you can see, it does cut both Horizontal-Axis and Legends, so the final result is not as good as It could be. Is there a way to solve this? I've been reading the official documentation and some posts from here, but I haven't found the way to do this.
Recap: How do we modify the legend or the axis texts so they are fully visible?
After some time experimenting, I daresay it is not posible to choose how much part of the words on legend or axis you can show.
However, you can play with their sizes and position so you get -more or less- what we were looking for.
This is what can be done:
legend: {position: 'top', textStyle: {fontSize: 14}}
I've also made the image a little bit bigger so it fits the x-axis without problems (There was also the option of making its text smaller).
So doing this, this is what you get:
Its basically about setting your chart area vs width / height.
width: [yourChoice]px,
chartArea: {width: '50%'}
ref https://stackoverflow.com/a/6870732/661584
Also as #ArcDare says using the other available styling options such as font size etc
For optmized chart area,
chartArea: {'width': '90%', 'height': '60%'},
legend: { position: 'bottom' },
hAxis : { textStyle : { fontSize: 10} },
vAxis : { textStyle : { fontSize: 10} },
The trick is setting axis textStyle fontsize will enable better placement of legend on the bottom of the chart as the chart Area is about 60-70%
Feel free to use my custom Google Charts plugin which creates both chart and table.
https://github.com/cosmoarunn/gapiExt