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
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!
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
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
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
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'
})