Indicator above bar in graph - highcharts

We have a highcharts chart displaying bars for Pass, Honor, Fail in a course. The chart shows the percentage of students for each as a vertical bar.
I would like to have an indicator above the bar that the particular student being viewed fit. So for example if the student received a Pass for the course there would be some indicator/graphic above the Pass bar. See image as an example

It can be done using Highcharts.SVGRenderer
1.Custom path using renderer.path() method (eg. arrow):
arrow = chart.renderer.path([
'M', x, y,
'L', x - size, y - size,
'L', x - size / 3, y - size,
'L', x - size / 3, y - 3 * size,
'L', x + size / 3, y - 3 * size,
'L', x + size / 3, y - size,
'L', x + size, y - size,
'z'
]).attr({
fill: 'orange',
stroke: '#000',
'stroke-width': 1
}).add().toFront();
Demo:
https://jsfiddle.net/BlackLabel/aor76xtn/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
2.Image using renderer.image() method:
arrow = chart.renderer.image(
'https://www.highcharts.com/samples/graphics/sun.png',
x - size / 2,
y - size,
size,
size
).add().toFront();
Demo:
https://jsfiddle.net/BlackLabel/upyx3z0m/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image

Related

Dynamically calculate data between points

I'm creating a chart with 2 series. The series share the same axis but have different Ys for different Xs. For example:
Axis A: [{ x: 2, y: 5}, { x: 4, y: 10}]
Axis B: [{ x: 1, y: 2}, { x: 3, y: 6}, { x: 3, y: 9}]
I want to show a tooltip for each X value that appears in axis A (so in this case, for x = 2, 4) and in the tooltip show the value that both axis would have there.
So the problem is that for axis B I don't have a point for x = 2 and x = 4. Is there a way to calculate dinamically the Y value that the axis B would have in those Xs?
This is an example: the tooltip shows info of the blue point, but also calculates what the corresponding green point would be and shows it in the tooltip.
Thank you!

Render SVG images on each point of gantt chart in highcharts

I want to put some images as SVG on each point in Gantt chart, I've tried something like below:
function (chartt) { // on complete
chartt.renderer.image('imageURL.png',100,100,30,30)
.add();
}
But after running this code, the image will be shown on the corner of the page. I want to draw images on each point in the chart and set their position related to its point.
Live Demo: https://jsfiddle.net/meysamm22/x41wdu5z/
You need to use the right x and y attributes, calculate them based on plotX and plotY point's properties:
function(chartt) { // on complete
var points = chartt.series[0].points,
width = 30,
height = 30;
points.forEach(function(point) {
chartt.renderer.image(
'https://www.highcharts.com/images/employees2014/Torstein.jpg',
point.plotX + chartt.plotLeft + point.shapeArgs.width / 2 - width / 2,
point.plotY + chartt.plotTop - height / 2,
width,
height
)
.attr({
zIndex: 5
})
.add();
});
});
Live demo: https://jsfiddle.net/BlackLabel/r4ph3ykz/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image

high charts legend labels symbols issue can't get the rectangle

I'm trying to change high charts legend labels symbols to rectangle. I tried some references but i'm getting square on top of default symbol. What I need is this Legend labels with just rectangle
You had almost the solution. You need to create your own symbol using the SVG renderer like that:
// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.rectangle = function (x, y, w, h) {
return ['M', x, y, 'L', x + w*2, y, 'L', x+w*2, y + h,'L', x, y + h, 'z'];
};
if (Highcharts.VMLRenderer) {
Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}
You can learn more about SVG Paths here
Fiddle

How to add line which runs through origin (from positive to negative) on a scatterplot - highchart

I am trying to create a reference line that runs through the origin and passes from negative to positive. See an example of what i am trying to achieve - see the threshold line. This threshold line must run through all three x, y coordinates (-1,-45,000), (0.0), (1, 45,000).
enter image description here
Below is my work so far.
http://jsfiddle.net/catio6/rhf6yre5/1/
I've looked at this for reference but have had had no luck after several hours of attempts of replicating this with all three x, y coordinates (-1,-45,000), (0.0), (1, 45,000): http://jsfiddle.net/phpdeveloperrahul/XvjfL/
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
series: [{
data: [29.9, 71.5, 256]
}]
}, function(chart) { // on complete
console.log("chart = ");
console.log(chart);
//chart.renderer.path(['M', 0, 0, 'L', 100, 100, 200, 50, 300, 100])
chart.renderer.path(['M', 75, 223.5,'L', 259, 47])//M 75 223.5 L 593 223.5
.attr({
'stroke-width': 2,
stroke: 'red'
})
.add();
});
});
So Highcharts doesn't have, as far as I know, a way to define a line that goes from/to infinity.
One idea I had to solve this issue for you is dynamically calculate the values for the line series based on your data. The idea is simple: Given the maximum values for X and Y you want to plot, we just need to limit the axis to a certain value that makes sense and calculate the values for the asymptote series in order to make it seems infinite. My algorithm looks like this:
// Get all your other data in a well formated way
let yourData = [
{x: 0.57, y: 72484},
{x: 0.57, y: 10000}
];
// Find which are the maximum x and y values
let maxX = yourData.reduce((max, v) => max > v.x ? max : v.x, -999999999);
let maxY = yourData.reduce((max, v) => max > v.y ? max : v.y, -999999999);
// Now you will limit you X and Y axis to a value that makes sense due the maximum values
// Here I will limit it to 10K above or lower on Y and 2 above or lower on X
let maxXAxis = maxX + 2;
let minXAxis = - (maxX + 2);
let maxYAxis = maxY + 10000;
let minYAxis = -(maxY + 10000);
// Now you need to calculate the values for the Willingness to pay series
let fn = (x) => 45000 * x; // This is the function that defines the Willingness to pay line
// Calculate the series values
let willingnessSeries = [];
for(let i = Math.floor(minXAxis); i <= Math.ceil(maxXAxis); i++) {
willingnessSeries.push([i, fn(i)]);
}
Here is a working fiddle: http://jsfiddle.net/n5xg1970/
I tested with several values for your data and all of them seem to be working ok.
Hope it helps
Regards

border over plot rectangle in chart

I want to draw a border on chart.Basically its a rectangular chart. So I can use plotxsize,plotysize,plotleft,plottop to draw border as rectangle.
chart.renderer.rect(
chart.plotLeft,
chart.plotTop,
chart.plotSizeY,
chart.plotSizeX,
0).attr({
'stroke-width' : 2,
'stroke' : '#3fa9f5',
'fill' : 'none'
}).add();
But is there any way to remove that rectangular border.
Or is there a way to update plotborderwidth and plotbordercolor dynamically?
Keeping rendered object in variable, allows to show/hide SVG object by show/hide option.
Example:
- http://jsfiddle.net/n9tLuf92/
var r = chart.renderer,
borderColor = '#346691',
borderWidth = 2,
top = chart.plotTop,
width = chart.plotWidth,
left = chart.plotLeft,
height = chart.plotHeight,
border;
border = r.path(['M', left, top, 'L', left + width, top, 'L', left + width, top + height, 'L', left, top + height, 'Z'])
.attr({
'visible': true,
'stroke': borderColor,
'stroke-width': borderWidth
})
.add();
Docs:
- http://api.highcharts.com/highcharts#Renderer.path
By attr() function you can manipulate params.
Example:
border.attr({
'stroke': 'green'
})

Resources