I need to create a line chart where the xAxis would show vertical gridlines instead of horizontal ones, just like in "charts: {inverted: true}" case (example on the screen below).
vertical gridlines effect
Unfortunately, that solution isnt' entirely accurate because it switches the order of the data as well, so in fact the Distance scale ends up at the side of the chart, while it should be at the bottom of it, like here:
proper data order but with horizontal gridlines
My question is: is there a way to make gridlines display vertically without switching the order of the data?
Here's the exemplary chart from Highcharts demo, where I would like to change the display of the gridlines:
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
inverted: false
},
xAxis: {
reversed: false,
labels: {
formatter: function () {
return this.value + 'km';
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
},
legend: {
enabled: false
},
series: [{
name: 'Temperature',
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
PS I would prefer not to tamper with the order of the data that's being passed to the function.
Have you consider using xAxis.gridLineWidth and xAxis.gridLineColor parameters?
http://api.highcharts.com/highcharts/xAxis.gridLineWidth
http://api.highcharts.com/highcharts/xAxis.gridLineColor
$(function() {
$('#container').highcharts({
chart: {
type: 'spline',
inverted: false
},
xAxis: {
reversed: false,
gridLineWidth: 1,
labels: {
formatter: function() {
return this.value + 'km';
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
gridLineWidth: 0,
labels: {
formatter: function() {
return this.value + '°';
}
},
},
legend: {
enabled: false
},
series: [{
name: 'Temperature',
data: [
[0, 15],
[10, -50],
[20, -56.5],
[30, -46.5],
[40, -22.1],
[50, -2.5],
[60, -27.7],
[70, -55.7],
[80, -76.5]
]
}]
});
});
Here you can see an example how it can work:
http://jsfiddle.net/r3wd8j7t/1/
Related
I have a high chart code like this:
Highcharts.chart('linechart', {
chart: {
backgroundColor:'rgba(255, 255, 255, 0.8)',
borderRadius:5,
},
title: {
text: 'ROC Graph'
},
subtitle: {
text: 'Learning Evaluation'
},
xAxis: {
min: 0,
max: 1,
tickWidth:1,
tickPositions: [0.001, 0.01, 0.1,1]
},
yAxis: {
max: 1,
tickInterval:0.1,
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 0.30
}
},
});
And my javascript code:
for(j=0; j<data.roc_buffer[i]['xs'].length/10;j++){
x_plot = data.roc_buffer[i]['xs'][10*j]
y_plot = data.roc_buffer[i]['ys'][10*j]
plot_buffer[j] = {'x':x_plot, 'y':y_plot}
}
roc_chart.addSeries({
name: data.roc_buffer[i]['plotname'],
data: plot_buffer
});
It work out fine like this
However, I want the [0.001,0.01,0.1,1] all have same width so I need to adjust the xaxis to type logarithm. So I switch my code to:
xAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
Now the line disappear...
Also my data is something like
[{x:integer,y:integer},{x:integer,y:integer},{x:integer,y:integer},...]
What I understand.
Your xAxis and yAxis both value dynamically generated.
You can set data using setData method for yAxis and setCategories for xAxis.
$('#button').click(function () {
highchart.series[0].setData([1, 2, 4, 8, 16]);
highchart.xAxis[0].setCategories(['J', 'F', 'M', 'A', 'M']);});
or Check jsfiddle link
http://jsfiddle.net/ashish8833/w3o0jzL7/1/
All,
I'm trying to allow for a user to click on a highchart between two data points and draw a line. The resulting line will calculate LARGESTVALUE-SMALLESTVALUE above the rendered line.
I'm attempting to use this example (http://jsfiddle.net/2MdEN/1/).
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
// Add it
series.addPoint([x, y]);
}
}
},
title: {
text: 'User supplied data'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function() {
if (this.series.data.length > 1) this.remove();
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80], null, [60, 40], [85, 60]]
}]
});
});
});
The problem is that is connects the last data point in the series to the newly added point. I'd like the points to be detached from the series to allow for lines being drawn above the generated chart.
Is there any way to accomplish this?
Thank you
You can include a second empty series in your chart config, and change which series you are adding a point to:
events: {
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[1]; <------------
// Add it
series.addPoint([x, y]);
}
}
You can also then move your point click event into the second series, if you don't want users to be able to remove points from the original data:
series: [{
data: [
[20, 20],
[80, 80], null, [60, 40],
[85, 60]
]
}, {
id: 'dummy',
color: 'rgba(204,0,0,0.9)',
point: {
events: {
'click': function() {
this.remove();
}
}
}
}]
Updated example:
http://jsfiddle.net/2MdEN/107/
I used the following
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function (e) {
var c = this.series[0].chart;
var s = this.series.length;
var x = e.xAxis[0].value;
var y = e.yAxis[0].value;
if(s == 1) {
c.addSeries('newSeries' + new Date());
c.series[1].addPoint([x, y]);
}else{
if(this.series[this.series.length-1].data.length%2 == 1) {
c.series[this.series.length-1].addPoint([x, y]);
}else{
c.addSeries('newSeries' + new Date());
c.series[this.series.length-1].addPoint([x, y]);
}
}
}
}
},
title: {
text: 'User supplied data!!!!'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
gridLineWidth: 1,
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function () {
if (this.series.data.length > 1) {
this.remove();
}
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80]]
}]
});
});
I have a Highcharts pie graph that I need to show multiple labels for each slice, such as an indicator (title) label with a connector on the outside of the slice, and a percentage label without connectors inside the slice.
I can set the distance property in order to bring the label (and the connector) to inside part of the slice but then, of course, there is no label outside anymore.
Any help would be greatly appreciated.
Thank you in advance.
There is no direct possibility to create multiple dataLabels. As you can see on this post, a solution would be to create two overlaying charts.
See JSFiddle here :
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
y:100
},
title: {
text: 'sfs '
},
yAxis: {
title: {
text: ' '
}
},
plotOptions: {
pie: {
// y:1,
shadow: false,
// center: ['50%', '50%'],
borderWidth: 0,
showInLegend: false,
size: '80%',
innerSize: '60%'
,
data: [
['allo', 18],
['asdad', 14],
['asdad', 11],
['asdasd', 10],
['adad', 8],
['asdada', 7],
['adada ada', 7],
['adad', 5],
['asdas',7],
['ada', 3]
]
}
},
tooltip: {
valueSuffix: '%'
},
series: [
{
type: 'pie',
name: 'Browser share',
dataLabels: {
color:'white',
distance: -20,
formatter: function () {
if(this.percentage!=0) return Math.round(this.percentage) + '%';
}
}
},
{
type: 'pie',
name: 'Browser share',
dataLabels: {
connectorColor: 'grey',
color:'black',
// y:-10,
softConnector: false,
connectorWidth:1,
verticalAlign:'top',
distance: 20,
formatter: function () {
if(this.percentage!=0) return this.point.name;
}
}
}
]
});
});
I'd like to have the lines linking each data block, like the attached screenshot from Excel. Even better would be if the line could change color based on it's angle. I can't seem to find anything in the documentation to create this style chart. Any ideas?
JSFiddle - Same Bar Chart (without connectors)
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Row1', 'Row2']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Data1',
data: [9, 4]
}, {
name: 'Data2',
data: [12, 6]
}, {
name: 'Data3',
data: [15, 7]
}, {
name: 'Data4',
data: [16, 8]
}, {
name: 'Data5',
data: [19, 7]
}]
});
});
I wonder is it possible to change line color in highchart for specific y range using some kind of function, I really don't know how to achieve this, this is my idea, as a beginner I don't know how to write function to do this, function which I want to develop would like this
Added in fiddle have a look FIDDLE
function range(ystart,yend,ycolor,xpoint){
// I do not know how to achieve this,
// I am interested send y range as a argument suppose in current example
// y : 1 - 6 should be in red color and
// x = 36 should have marker in yellow color
// So I would like to call like this
range(1,6,"#F90B0B",34)
}
This is actual code
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
type : 'scatter',
marginLeft: 50,
marginBottom: 90
},
yAxis: {
reversed: true,
},
plotOptions: {
series: {
animation: {
duration: 2000
},
lineWidth: 2
},
},
xAxis: {
opposite: true
},
series: [{
name: 'Test Plot',
data: [
[28, 0],
[29,1],
[30, 3],
[34, 4],
[32,5],
[28, 6],
[24, 7],
[19,8],
[15, 9]
]
}]
});
});
Thank in advance for all volunteers
The easiest way would be to separate the data and create separate series (with different colors) for the different ranges. That would mean, of course, that you would have to create a custom legend.
Edit to your function:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy',
type : 'scatter',
marginLeft: 50,
marginBottom: 90
},
yAxis: {
reversed: true,
},
plotOptions: {
series: {
animation: {
duration: 2000
},
lineWidth: 2
},
},
xAxis: {
opposite: true
},
series: [{
name: 'Test Plot',
data: [
[28, 0],
[29,1],
[30, 3],
[34, 4],
[32,5],
[28, 6]
],
color: "#F90B0B"
},
{
name: 'Test Plot2',
data: [
[28, 6],
[24, 7],
[19,8],
[15, 9]
],
color: "#F909F9"
}]
});
});
At this moment is it not supported, only by two series, but in the nearest feature it should be available.