How can i draw following graph using Scatter Plot highchart?
I am trying to achieve this kind of plot that is being displayed in screenshot using Highcharts. Till now I am able to Draw point onto the chart using Scatter Plot but I am having trouble plot these two red line from X-axis and Y-axis. Can anyone of you help me here the what I need to do to draw two straight line from a point, one toward X-axis and second toward Y-axis. The attached code is only the JS code that I used for ploting the scatter graph. Thanks
/* calculationChart */
$(function () {
$('#FHIchart').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Strategic Alignment'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true,
},
yAxis: {
title: {
text: 'Process & Technology Integration'
},
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
lineWidth: 2
}
},
series: [{
name: ' ',
color: 'Red',
data: [[3.1, 3]]
}]
});
});
here is my code.
Use renderer.path to draw a line. You can draw the line on load event and redraw it on redraw event.
events: {
load: function() {
var point = this.series[0].points[0],
{
plotX: x,
plotY: y
} = point;
point.path = this.renderer.path()
.add(point.series.group)
.attr({
stroke: point.color,
'stroke-width': 1,
d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
});
},
redraw: function() {
var point = this.series[0].points[0],
{
plotX: x,
plotY: y
} = point,
path = point.path;
if (path) {
path.attr({
d: `M 0 ${y} L ${x} ${y} L ${x} ${this.plotHeight}`
})
}
}
}
example: https://jsfiddle.net/5j208Lpb/
The other solution is to define 2 additional points which will have be drawn outside the plot area. You need to set axes limits and set series.lineWidth to 1.
example: https://jsfiddle.net/5j208Lpb/1/
Related
I am trying to achieve combined 2 Semidonut Pie Charts series to show Current year and Last year percentage with my data .
At the same time I am trying to overlay another series with data which will represent the YOY percentage increase or decrease which will appear as label outside my outer pie as "+50%" , "-60%"
Since YOY can be negative and this disturb's the Pie . I was reading that Pie is not ideal to put the negative numbers but visually in my usecase customer feels this will be great .
I tried to massage the YOY data with negative to multiply with (-1) and put into pie and I kind of able to represent the number outside pie but can't bring the "+" or "-" with "%" as valuesuffix .
I have working example here but again this is with 2 data series ... my 3rd series will be "YOY%" with the datalabel display outside which is not added here as 3rd series with negative bring a weird donut .
Anybody has idea how to implement this solution to represent series 3 with YOY Outside as regular datalabels ?
https://codepen.io/pauldx/pen/BayyJaa
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2017',
align: 'center',
verticalAlign: 'middle',
y: 60
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'],
size: '110%'
}
},
series: [{
type: 'pie',
innerSize: '50%',
dataLabels: {
enabled: true,
// inside: true,
distance: -70,
},
data: [
['LYA', 58.9],
['LYB', 28.9],
['LYC', 30.29],
]
},
{
type: 'pie',
name: 'Browser share',
innerSize: '70%',
dataLabels: {
enabled: true,
// inside: true,
distance: -20,
},
data: [
['CYA', 20],
['CYB', 18.9],
['CYC', 70.29],
]
}]
});
As I understood - you would like to add only the dataLabels with calculated YOY value, am I right? Or do you want to add a whole series? If just a dataLabels - there is a guideline how to achieve it by adding custom dataLabels:
events: {
render() {
let chart = this,
yoyValue,
x,
y;
chart.series[1].points.forEach((p, i) => {
if (chart['label' + i]) {
chart['label' + i].destroy();
}
yoyValue = Math.floor(((p.y - chart.series[0].points[i].y) / p.y) * 100);
x = p.dataLabel.translateX - (p.shapeArgs.end == 0 ? -40 : 30);
y = p.dataLabel.translateY;
chart['label' + i] = chart.renderer.text(yoyValue + '%', x, y).attr({
zIndex: 100,
}).css({
fontWeight: 'bold',
color: 'white',
textOutline: '1px contrast'
}).add();
})
}
}
Demo: https://jsfiddle.net/BlackLabel/p82L4ad1/1/
API: https://api.highcharts.com/highcharts/chart.events.render
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
It seems like when I enable crosshair for the yAxis, only the last series defined get a crosshair. I would like all of them to be crosshaired.
(.. and I would love if they also had the color (or preferably a darker variant) as the series.)
You can create an y axis per series, link those additional axes to the first one and define a specific crosshair in each axis - then link series with a specific axis and you will get an seperate customizable crosshair per series.
Highcharts.chart('container', {
yAxis: [{
gridLineWidth: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[0]
}
}, {
linkedTo: 0,
crosshair: {
width: 2,
color: Highcharts.getOptions().colors[1]
},
visible: false
}],
tooltip: {
shared: true
},
series: [{
data: data.slice()
}, {
yAxis: 1,
data: data.reverse()
}]
});
example: http://jsfiddle.net/absuLu6h/
I'm trying to add a custom label to a highcharts pie chart. The label is going to (eventually) be center, bottom aligned and display some html data. The problem is the label does not show on the chart, trying to use 'renderer'. I'm quite new to highcharts, what am I doing wrong?
$('#div_graph_0_1').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
credits: {
enabled: false
},
title: {
text: 'NEW VISITORS'
},
subtitle:{
text: pieSubtitleTotal,
style: { color: '#f07600' }
},
tooltip: {
pointFormat: '{point.y}'
},
plotOptions: {
pie: {
states: {
hover: {
halo: {
size: 9,
attributes: {
fill: '#f07600'}
}
}
},
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
connectorWidth: 0,
enabled: true,
format: '{point.y}',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
}
},
series: [{
name: 'New',
colorByPoint: true,
data: [{
name: 'Repeat',
y: subtitleTotal,
color: '#fff',
borderColor: '#f07600',
borderWidth: 2
}, {
name: 'New',
color: '#f07600',
borderColor: '#f07600',
y: pieTotalVisitors,
sliced: true,
selected: true
}]
}],
navigation: {
buttonOptions: {
enabled: false
}
},
function(chart) { // on complete
chart.renderer.text('This text is <span style="color: red">styled</span> and linked', 0, 0)
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
}
});
You're on the right track, as your rendered text IS there and present on the chart. What you needed to define was the expected X and Y values where you wanted the text to be placed.
I discovered this because of the "y" in "styled":
If you define a different y value in your renderer.text call, say, 100, you get this:
Here is the syntax you should follow:
chart.renderer.text('Your text', X_VALUE, Y_VALUE)
In my above example, I set your text to:
chart.renderer.text('Your text', 0, 100)
... which puts it 100 pixels down from the top of the chart.
You're going to have to define these values manually; there's no out-of-the-box way to say "bottom-aligned, center-aligned." To make this more versatile, what you could do is capture the height and width of your container div and calculate the x and y values that way.
You can do this by fixing the height and width of your chart in a stylesheet declaration, defining JavaScript variables outside your chart options, and then calling those variables from the renderer.text declaration:
// in your inline stylesheet
#container: { width: '650px', height: '450px' }
// variables defined before your chart options
var chartHeight = $('#container').height();
var chartWidth = $('#container').width();
// in your renderer code
chart.renderer.text('Your text', chartWidth * 0.5, chartHeight - 100)
In the above example, your rendered text would start at 50% of your chart's width and 100 pixels from the bottom of your chart.
One point to keep in mind: you mentioned an HTML table. In that case, I'd suggest switching renderer.text to renderer.html. That will allow many more HTML elements to be rendered in the final chart.
I hope all of this has been helpful!
When I try do display flat values using HighStock chart the ticks and labes on Y Axis disappear as you can see in the followin link:
http://jsfiddle.net/garlam/VmwAQ/
$(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
yAxis: {
title: {
text: 'test-values'
}
},
series: [{
name: 'test',
data: [ { x: 1361443380000, y: 10}, { x: 1361443410000, y: 10}, { x: 1361443440000, y:10}, {x:1361443470000, y:10} ]
}]
});
});
I would like to avoid set of y axis min value
Any help ?
You can set min / max value
yAxis: {
min:0,
max:20,
title: {
text: 'test-values'
}
},
I need to plot a radar chart using HighCharts; in particular, all of the series have a different scale. I am able to draw correctly the radar chart using multiple scales (one per y-axis), but I see multiple overlapping labels on the main y-axis, which is clearly wrong. Now, I want instead to plot the labels related to every y-axis on the corresponding y-axis. How can I do this ?
Here is a snippet that can be pasted in jsFiddle to verify that the labels indeed overlap.
$(function () {
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
polar: true,
type: 'line',
zoomType: 'xy'
},
title: {
text: 'Indicators Radar Chart',
x: -80
},
pane: {
size: '90%'
},
xAxis: {
categories: ['A', 'B', 'C', 'D'],
tickmarkPlacement: 'on',
lineWidth: 0,
min: 0
},
yAxis: [{
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}, {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}, {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels: {
enabled: true
}
}],
tooltip: {
shared: true,
valuePrefix: ''
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
series: [{
name: 'Austria',
yAxis: 0,
data: [0.130435, 35.043480, 29288.695312, 236960.296875],
pointPlacement: 'on'
}, {
name: 'Germany',
yAxis: 1,
data: [0.000000, 42.217392, 149103.906250, 589782.500000],
pointPlacement: 'on'
}, {
name: 'Italy',
yAxis: 2,
data: [2.304348, 44.826088, 132805.218750, 878785.937500],
pointPlacement: 'on'
}]
});
});
The output I am trying to obtain is such that for this particular chart, the labels related to the different scales appear along each axis: from the center point to A, from the center point to B, from the center point to C and from the center point to D. The problem is that right now all of the labels appear on the same axis, from the center point to A.
Thank you in advance.
Demo: http://www.highcharts.com/jsbin/eyugex/edit
You seem to assume that each of the axes extend from the center to different directions, but this is not the case. All Y axes extend from the center. The X axis starts on top of the chart and follows the perimeter clockwise around the perimeter and ends on top. The Y axis labels are drawn where the X axis starts, which is up.
In a chart like this it wouldn't make sense to add multiple Y axes because they are all drawn on top of each other and you can't visually distinguish one from another.