I am using Highcharts to draw a line graph.
When the page loads, the line graph is drawn. Please note, that i got an y-Value for every x-Value starting from 0 till 700 ( 0,1,2,3,...,700). This is how i create the graph:
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false,
type: 'line',
marginTop: null,
marginRight: 55,
marginBottom: 50,
marginLeft: 80,
backgroundColor: backgroundColor,
spacingTop: 10,
spacingRight: 10,
spacingBottom: 15,
spacingLeft: 10,
},
title: {
text: ' Graph',
style: {color: graphLabelColor},
x: -20 //center
},
xAxis: {
title: {
text: 'xAXIS',
style: {
color: axisLabelColor
},
},
min:0,
max: 600,
gridLineColor: gridLineColor,
minorTickInterval: 50,
minorTickLength: 1,
tickInterval: 100,
minorGridLineWidth: 0,
gridLineWidth: 1,
lineColor: axisColor,
labels: {
style : {
color: axisColor
}
},
plotLines: [{
value: 0,
width: 0,
color: axisColor
}]
},
yAxis: {
title: {
text: 'yAxis',
style: {color:
axisLabelColor
},
},
min:0,
max: 700,
gridLineColor: gridLineColor,
lineColor: axisColor,
minorTickInterval: 50,
minorTickLength: 1,
minorGridLineWidth: 0,
tickInterval: 100,
labels: {
style: {
color: axisColor
}
},
plotLines: [{
value: 0,
width: 0,
color: axisColor
}]
},
exporting: {
enabled: false
},
tooltip: {
enabled: true,
borderColor: crosshairColor,
crosshairs: [{
width: 1,
color: crosshairColor,
},
{
width: 1,
color: crosshairColor,
}],
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+this.y +' & '+ this.x.toFixed(0);
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 1,
borderColor: plotlineColor,
enabled: false,
floating: true,
shadow: true
},
plotOptions: {
series: {
enableMouseTracking: true
},
line: {
color:plotlineColor,
},
},
series: [{
lineWidth: 2,
name: carname,
data: dataArray,
marker: {
color:crosshairColor,
radius: 1
}
}]
});
In my HTML-Page I got two buttons to increase/decrease (+1/-1) a number in a textfield, starting at 200. The number represents a x-Coordinate in the graph.
I would like to highlight the shown number of my textfield in the graph with another color and a bigger point when the graph is loaded the first time and also when the user changes the number using one of these buttons. How can I do this?
I tried
chart.series[0].options.data[valueOfTextfield].color = 'yellow';
chart.redraw(true);
in the onclick method of the buttons but it doesnt work.
Thanks for your answers!
Using a marker we can do this:
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, { marker: {
fillColor: '#FF0000',
lineWidth: 3,
lineColor: "#FF0000" // inherit from series
},y:71.5}, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
http://jsfiddle.net/zR4Kn/
use the select method of the point object
https://api.highcharts.com/highcharts/series.line.point.events.select
Related
I would like to develop a Spider Web Radar which looks similar to the graph shown in image below using highcharts. can you please tell me wether this could be achieved using High charts. please check the below code and image attached
This is my approach Fiddle.
Highcharts.chart('container', {
chart: {
polar: true,
type: 'area',
},
legend: {
enabled: false
},
title: {
text: 'Budget vs spending',
x: -90
},
pane: {
size: '90%'
},
xAxis: {
categories: ['Bonds', 'Future', 'Past', 'Value', 'Health', 'Divedend'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
labels:
{
enabled: false
}
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
series: [{
color: {
linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
},
stops: [
[0, '#50e3c2'],
[1, '#50e3c2']
]
},
marker: {
enabled: false,
states: {
hover: {
radius: 8,
symbol: 'square',
}
}
},
name: 'Allocated Budget',
data: [80, 70, 60, 70, 70, 60],
pointPlacement: 'on',
shadow: {
color: '#000000',
width: 7,
opacity: 0.08,
offsetY: 3,
offsetX: 0
},
}]
});
I'm currently working on highcharts and I am confused on how highcharts work with multiple axes, to be exact, i wanted to have a secondary axis-y but I don't understand how it works. Can someone explain to me how can I add the secondary axis and the data that i will be inputted on last will based on the secondary axis? Thank you.
Below is the example of multiple axes I've searched in jsfiddle.
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-multi-axes/
Below is the code of multiple axis:
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Sea-Level Pressure',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} mb',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}]
Too hard to explain by word so i've created sample chart with 2 y-Axis and i've comment on some important action to work with multiple yAxis.
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JS code
Highcharts.chart('container', {
chart: {
zoomType: 'xy'
},
title: {
text: 'Average Monthly Temperature and Rainfall in Tokyo'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
//Y-Axis is the line on a graph that runs vertically (up-down) through zero.
//It is used as a reference line so you can measure from it.
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
////////Notice: importance option
opposite: true //This option will set position of this axis to the right side
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{ //Data for Secondary yAxis
name: 'Rainfall',
type: 'column',
////////Notice: importance option
yAxis: 1, //This option will define which yAxis data will runs on, if not set default all data will runs on the 0 yAxis (as left side)
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
tooltip: {
valueSuffix: ' mm'
}
}, { // Data for Primary yAxis
name: 'Temperature',
type: 'spline',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
tooltip: {
valueSuffix: '°C'
}
}]
});
My fiddle: http://jsfiddle.net/nmtri1101/e4Lpdgj8/2/.
Hope it useful to you.
In the code you have posted you have three y-axes. Highcharts gives these axis indexes 0, 1, 2 respectively. When you input a new series, you need to tell highcharts which axis this series should use, based on these indexes. So for example, to tie data to the rainfall axis, you will need to do the following:
series: {
yAxis: 1,
data: [0,0.2,0.4]
}
See API for information and the following example from highcharts demos.
Is it possible to have different fill colors for values above or below a given threshold in Chart.js (Chart.js)?
I can't find any option to do this in Chart.js, has anyone done something like this before? I prefer to use Chart.js over Highcharts.
Like this: Highcharts example
html
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
js
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
title: {
text: '$'
}
},
title: {
text: 'Win/Loss'
},
series: [{
name: 'Avg. ($)',
data: [546, 342, -234, -540, 103, -345],
threshold: -1,
negativeFillColor: 'rgba(255,0,0,0.5)',
fillColor: 'rgba(0,204,0,0.5)',
lineColor: 'rgba(0,0,0,1)',
marker: {
fillColor: 'rgba(255,255,255,1)',
lineColor: 'rgba(0,0,0,1)',
lineWidth: 1
}
},{
name: 'User ($)',
data: [-640, -665, -700, -640, -630, -623],
fillOpacity: 0,
lineColor: 'rgba(20, 94, 204, 1)',
marker: {
fillColor: 'rgba(255,255,255,1)',
lineColor: 'rgba(20, 94, 204, 1)',
lineWidth: 1
}
}]
});
});
I did a similar thing using gradientStroke command, then applying this to the backgroundColor:
var ctx = document.getElementById("YearsExperience").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0, 1200, 0, 0);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(0.2, "#94d973");
gradientStroke.addColorStop(0.4, "#80b6f4");
gradientStroke.addColorStop(1, "#94d973");
var YearsExperience = new Chart(ctx, {
type: 'bar',
data: { labels: ArrLabel[idx], datasets: [{ label: 'Years of experience', data: ArrData[idx], backgroundColor: gradientStroke }] },
options: { scales: { xAxes: [{gridLines: {display:false}}], yAxes: [{ ticks: { beginAtZero:true } }] }, events: ['none'],animation: { easing: "easeInOutBack" } }
});
An example of the output can be seen here: http://neophytte.mine.nu/portfolio/skills.html
I'm trying to get the gradients to map to my y-axis. I have a min of 90 and a max of 150. I want a yellow gradient from the top down to 120 and I want it to be consistent across browsers. Can I do this? Here's my code:
$('#ao_vs_ppv').highcharts({
chart: {
backgroundColor:
{
linearGradient: [0, 215, 0, 220],
stops: [
[0, 'rgb(255,255,50)'],
[1, 'rgb(255,255,255)']
]
},
type: 'scatter'
},
title: {
text: 'Air Overpressure Vs. Peak Particle Velocity'
},
xAxis: {
min: .010,
max: 10,
type: 'logarithmic',
title: {
text: "Peak Particle Velocuty (in/sec)"
},
labels: {
overflow: 'justify'
},
tickmarkPlacement: 'on',
gridLineWidth: 1
},
yAxis: {
min: 90,
max: 150,
title: {
text: 'Air Overpressure (dBL)'
},
tickInterval:10,
labels: {
overflow: 'justify'
}
},
plotOptions: {
scatter: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'AO: {point.y}dBL<br>PPV: {point.x}in/sec'
}
}
},
legend: {
layout: 'horizontal',
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
series:formatHighChartsScatter(data[i]['x_data'],data[i]['y_data'], seismoNames)
});
Change from backgroundColor to plotBackgroundColor, and use object format, not pixel, see: http://jsfiddle.net/92Nw8/1/
$('#ao_vs_ppv').highcharts({
chart: {
plotBackgroundColor: {
linearGradient: {
x1: 0,
x2: 0,
y1: 1,
y2: 0
},
stops: [
[0, 'rgb(255,255,50)'],
[1, 'rgb(255,255,255)']
]
},
type: 'scatter'
}
}
I have been trying to get rid of the gap on the left and nothing works. This issues only happens when I add a reverse yAxis on the right. Below is the code I am using:
$(function () {
var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$('#container').highcharts({
chart: {
type: 'areaspline',
zoomType: 'xy',
},
title: {
text: 'Stats',
},
subtitle: {
text: 'YTD 2013 - 2014',
},
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
},
yAxis: [{ //--- Primary yAxis
min: 0,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
title: {
text: 'Mds',
style: {
color: '#8dc63f',
}
},
labels: {
style: {
color: '#8dc63f',
fontWeight: 'bold'
}
}
}, { //--- Secondary yAxis
labels: {
formatter: function () {
var mil = '$';
return mil + Highcharts.numberFormat(this.value, 0);
},
style: {
color: '#3fb4ed',
fontWeight: 'bold'
}
},
title: {
text: 'Revenue',
style: {
color: '#3fb4ed',
}
},
opposite: true
}],
series: [{
type: 'areaspline',
color: '#005a84',
fillOpacity: 0.2,
yAxis: 0,
zIndex: 3,
name: 'Goals',
data: [5, 5, 5, 5, 6, 8, 8, 8, 10, 10, 10, 10],
}, {
type: 'areaspline',
color: '#8dc63f',
fillOpacity: 0.2,
yAxis: 0,
zIndex: 4,
name: 'This Year',
data: [21, 14, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0],
}, {
type: 'areaspline',
color: '#d9531e',
fillOpacity: 0.2,
yAxis: 0,
zIndex: 3,
visible: false,
name: 'Last Year',
data: [20, 2, 2, 7, 8, 5, 7, 3, 2, 2, 5, 5],
}, {
type: 'column',
color: '#3fb4ed',
fillOpacity: 0.2,
yAxis: 1,
zIndex: 1,
visible: false,
name: 'Revenue',
data: [1, 1, 1, 1, 1, 1, 1, 1, 3, 4, 4, 2]
}]
});
});
I have tried every possible solutions out there. Went through API docs and searched every forum. Any help would be much appriciated.
You can set for xAxis:
xAxis: {
labels: {
enabled: true,
formatter: function () {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
min: 0.5, // remove padding
max: categories.length - 1.5, // remove padding
startOnTick: false, // allow to start not from tick
endOnTick: false // allow to end not at tick
},
Example: http://jsfiddle.net/p2EYM/24/ - turn on Revenue - you will see that first and last column will be cut off.
The reason it is doing this is because, even though the series is hidden on load, you have a column series that needs the width to display. If you just show series "Revenue" you can see it is using that empty space that was there before. You could also play with tickPixelInterval - but for that you need to not use a categorized xAxis.
See this example.
I also set showEmpty to false for both yAxis elements.
If you change the last of series from
type: 'column',
to
type: 'areaspline',
there will be no gaps on left and right side. Do you need type column?
Solution for your problem is answered here Highcharts Remove Space across the x-Axis by user Dusty. You have to setup for x-axis:
min: 0.5,
max: 10.5,
Note: if you turn your column type series to visible: true half of the first and the last column will be cut-off.