I have made a highcharts graph which is intended to mirror the following:
I am using a triangle image as a marker for the graph, but by default, the marker is being situated in the center of the bar. I have tried to use the translation function
chart.series[1].data.graphic.translate(0, 20);
but this does not seem to be helping.
Here is my full code:
barchartFiddle
I was also wondering how I would add the percentage to the top of as it would move along with the bar.
Furthermore, I have tried using (multiple versions with different css properties + high zIndex - I will be listing the basic)
chart.renderer.text('blah',50,50).add();
to add the bottom 3 criteria, but for some odd reason, no text shows up.
Finally, I was wondering what logic to add in order to change the appearance of the text, depending on the data, to mirror the one shown in the image (Note difference between acceptable and healthy)
In your jsFiddle you have added your callback function in wrong place, when you will add it correctly it should work fine.
function(chart) {
var marker = chart.series[1].data[0];
marker.graphic.translate(-20, 0);
}
You can use dataLabels for showing the percent value near your marker.
dataLabels: {
enabled: true,
x: -5,
y: 10,
style: {
fontSize: 20
},
formatter: function() {
return this.y + '%'
}
}
Here you can find an example how it can work: http://jsfiddle.net/2TuCW/341/
Related
I am trying to create a graph with plot bands in Highcharts, where I want to insert an icon into the plot band.
It all works well except that I cannot get the icon to show below the actual series line. I set the zIndex of the icon to 1 and series to 2, but it seems to not do anything.
I looked at the documentation here:
http://api.highcharts.com/highcharts/xAxis.plotBands.zIndex
But it should work based on that, but it does not, it works when I use text for the label, but not an image and the object has no specific class or ID so that I could target it with jquery and set the css manually.
To illustrate my point I made a fiddle:
http://jsfiddle.net/qwfj4x3j/
I used for example
{
color: null,
zIndex: -1,
from: 3.5,
to: 4.5,
label: {
text: "<img src='http://simpleicon.com/wp-content/uploads/rain.png' style='width:100px;z-index:-1'>",
verticalAlign: 'top',
useHTML: true,
y: 25
}
},
As you can see, I set the zIndex of both the plot band and the actual image, and a higher zIndex for the series, but it does not work.
OK, so in the end I found a very elegant solution :)
I gave all the images a class and then after the graph is rendered, I call jquery command that targets all parent elements of this class, the span I originally needed to target, but could not because it had no class or id. Now I can call all these as parents of my image with particular class, asign them z-index of -1 and it works :)
If you render an image in that way HTML <img> will be rendered at the top of the svg - this is why the image covers svg elements.
Instead, you can use chart.renderer.image() method combined with axis.toPixels() methods to get x, y attributes in pixels.
var img;
function renderImage() {
var chart = this;
img = chart.renderer.image(
'http://simpleicon.com/wp-content/uploads/rain.png',
chart.xAxis[0].toPixels(0),
chart.yAxis[0].toPixels(10),
150,
150
)
.add();
}
function redrawImage() {
img.attr({
x: this.xAxis[0].toPixels(0),
y: this.yAxis[0].toPixels(10)
});
}
Example: http://jsfiddle.net/qwfj4x3j/2/
To have the image responsive like plot lines you need to adjust x, y attributes on redraw event.
I made a small fiddle based on the highcharts demos at http://jsfiddle.net/w53woene/1/
The issue I have boils down to four things:
1) I need to rotate the labels (this is based on a feature request so I can't ignore it).
labels: {
rotation: -45
}
2) The fact that the last label is really really long. This is based on data which is given for each chart so it's not always the case but it's the case around 30%-40% of the time so quite often.
3) Labels shouldn't be wrapped or shortened with an ellipsis.
4) I need to add spacing between the chart and the legend to adapt to the labels size but only when the label is going to be too long and colliding with the legend.
This only seems to happen when the chart: { inverted: true } and if it's not inverted the legend behaves normally, increasing the distance from the chart as needed.
Ideally I'd like to know if there's a specific option I'm missing that achieves this natively, i.e., I would have expected floating: false to achieve this the same way it does when the chart is not inverted, but it doesn't seem to. If this isn't possible I'd like to know how I can adjust the chart size (excluding the legend) in order to achieve this via JavaScript.
The problem is that vertical axis add space on the left size, but doesn't add on the bottom. I would wrap labels for a better readability: http://jsfiddle.net/w53woene/2/ - otherwise it may happen that you will have so long label that chart will get 0 pixels for plotting area.
If you really need non-wrapped text, then I would wrap Axis.prototype. getOffset to add extra space:
(function(H) {
H.wrap(H.Axis.prototype, 'getOffset', function(p) {
p.call(this);
if (this.isXAxis) {
var lastTick = this.tickPositions[this.tickPositions.length - 1],
lastLabel = this.ticks[lastTick].label,
height = lastLabel.getBBox(true).height;
this.labelDiff = height - this.chart.marginBottom;
if (this.labelDiff > this.chart.axisOffset[2]) {
this.chart.axisOffset[2] = this.labelDiff;
} else {
this.labelDiff = 0;
}
} else {
this.offset -= this.chart.xAxis[0].labelDiff;
}
});
})(Highcharts)
And live demo: http://jsfiddle.net/vwegeuvy/
I am working with highcharts and having some problems with stackLabels configuration of highcharts. I was asked to display a bar chart with "score/full score" format, e.g. 6 out of 10 should be like
⬛︎⬛︎⬛︎⬛︎⬛︎⬛︎⬜︎⬜︎⬜︎⬜︎ 6/10
And I faked it with stacked bar chart with 6 for the first part of the bar and 4 for the second part.
[Solved] However, I don't know how to display 6/10 in stackLabels (It seems that I can only use {total} in it, while I can use {point.y}/{point.fullscore} in dataLabels).
[Unsolved] And also, when I use the basic bar chart, dataLabels automatically adjust its position (In my case, dataLabels will show on the left of the right edge of the bar). However, how should I force the stackLabels to display?
This answer points out that there is no enough space for stackLabels to display, and the solution is to make max value bigger and leave some space for it. However, the solution is not that elegant to me, and also since my bar chart is horizontal and the label should be long.
Any help will be appreciated! Thanks in advance!
To answer second question:
You can set yAxis.stackLabels.crop to false, so labels will be rendered always. Those labels won't show up inside the plotting area, but will be rendered somewhere outside. stackLabels are not dataLabels - dataLabels have option justify, which forces labels to be rendered inside the plotting area.
However, in Highcharts you can get access to those labels, and move them (that's why crop needs to be set to false - to render labels anyway), here is simple POC:
function updateStacks() {
var chart = this,
H = Highcharts,
padding = 15,
item,
bbox;
for (var stackName in chart.yAxis[0].stacks) {
for (var itemName in chart.yAxis[0].stacks[stackName]) {
item = chart.yAxis[0].stacks[stackName][itemName]; // get stack item
bbox = item.label.getBBox(true); // get label's bounding box
// if label is outside, translate it:
if (bbox.width + bbox.x > chart.plotWidth) {
// add some poding, for a better look&feel:
item.label.translate(-bbox.width - padding);
}
}
}
}
Now simply use that method in load and redraw events, here you are:
chart: {
type: 'bar',
events: {
redraw: updateStacks,
load: updateStacks
}
},
And live demo: http://jsfiddle.net/awe4abwk/ - let me know if something is not clear.
PS: Your answer with formatter for stackLabels is good!
Use formatter to change default stack label. You can access axis label with this.axis.
stackLabels: {
enabled: true,
formatter: function() {
return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
//Make your changes here to reflect your output. This is just a sample code
}
}
Now to always show stack labels you have two options which are described here.
Link
Okay, I've found the solution for the first question: How to show the specific series values in stackLabels? from this answer.
In my case, the code should be:
yAxis: {
stackLabels: {
formatter: function() {
return [this.axis.series[1].yData[this.x], '/', this.total].join('');
},
enabled: true,
}
}
If you have better solution, post it! And I still have no idea about how to find it in the docs, maybe I should dig more...
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 am going round in circles a bit with highcharts trying to make a chart as follows:
And here is a jsbin of the above example:
http://jsbin.com/pezufeweki/1/
My main issue is I have to use a fake segment (and make it white) for the values to be correct (which in turn means the 'hidden' section still has a tooltip.
Is there a way in highcharts to make a segment 'hidden' from the pie chart?
Alternatively, I can get away with making it white but then I would need to hide the tool tip just for that segment as I need it everywhere else.
An added bonus would be for the inner (red) area to start anti-clockwise.
Any pointers much appreciated.
Cheers.
Fixed hiding the tooltip per item
formatter: function() {
if (this.key === "hide") {
return false;
}
else return this.y;
}
{
name: 'hide',
y: 12,
color:'red'
},