Related
Question is related to this one.
Problem : Currently I have chart with 2 series - one serie with positive and one with negative values. By default each serie has dynamic scaling but they are not relating (I mean if 20 for first serie is MAX value and 5 for second serie is MAX, then it looks on graph like the same). When I set max and min values to yAxis, it solve problem, but adds to much empty space, that for some cases column is too small. Can I update chart setting to have dynamic scalling but one for both series?
Here is my example with setted MAX and MIN values for yAxis http://jsfiddle.net/futw5e8k/6/
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: null
},
xAxis: {
categories: ['13-17', '18-24', '25-34', '35-44', '45-54', '55-64', '65+'],
offset: -150,
lineWidth: 0,
tickWidth: 0
},
yAxis: [{
title: {
text: null,
},
top: 50,
height: 124,
min: 0,
max: 100,
gridLineColor: 'transparent',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
},{
title: {
text: null
},
top: 200,
height: 150,
offset: 0,
min: -100,
max: 0,
gridLineColor: 'transparent',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
}
}],
plotOptions: {
column: {
dataLabels: {
enabled: true,
crop: false,
overflow: 'none',
formatter: function() {
return Math.abs(this.y);
}
}
}
},
tooltip: {
formatter: function() {
return this.x + '<br/>' + this.series.name + ': ' + Math.abs(this.y);
}
},
series: [{
name: 'John',
data: [1, 13, 20, 19, 15, 7, 2]
}, {
name: 'Joe',
yAxis: 1,
data: [-0.35, -6, -9, -16, -3, -1.5, -0.25]
}]
});
On load event you can find the maximum of your data and dynamically update axes' max - see Axis.update().
chart: {
type: 'column',
events: {
load: function() {
const max = Math.max(this.series[0].dataMax, this.series[1].dataMax);
this.yAxis[0].update({
max: max,
}, false);
this.yAxis[1].update({
max: max,
top: 130
}, false);
this.redraw(false);
}
}
},
example: http://jsfiddle.net/futw5e8k/7/
I am trying to customize highcharts
1) I need to change the height of the plotlines
2) Show the marker value inside the marker image itself at a specific place(Inside the white circles at the top)
This is what I have achieved so far
Highcharts.setOptions({
global: {
useUTC: false
}
});
/*function updateData(x,y)
{
var series = chart.series[0];
series.addPoint([x, y], true, true);
}*/
var chart;
$(function () {
var color = '#AA34FF';
$('#container').highcharts({
chart: {
events: {
load: function(event) {
_bindCustomEvents();
}
},
backgroundColor: 'transparent'
},
series: [
{
color:
{
linearGradient:
{
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops:
[
/*[0, '#a83e3e'],
[0.21, '#d34e47'],
[0.40, '#edbb5a'],
[0.57, '#e2e57a'],
[0.76, '#8dcc63'],
[1, '#7ab237']*/
[0, '#7ab237'],
[0.21, '#8dcc63'],
[0.40, '#e2e57a'],
[0.57, '#edbb5a'],
[0.76, '#d34e47'],
[1, '#a83e3e']
]
},
lineWidth: 4,
marker: {
enabled: false,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
},
type: 'spline',
data: [1, 2, 5, 3, 6, 7, 4],
backgroundColor: 'transparent',
plotShadow : false
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc08.deviantart.net/fs71/f/2014/016/b/9/top_marker_by_skyrbe-d72ewk0.png)'
},
data: [8,8,8,8,8,8,8],
type:'scatter'
},
{
name: '',
marker: {
symbol: 'diamond'
},
//same inmage for all points
marker: {
symbol: 'url(http://fc03.deviantart.net/fs71/f/2014/016/f/a/bottom_marker_by_skyrbe-d72ew7w.png)'
},
data: [-1,-1,-1,-1,-1,-1,-1],
type:'scatter'
}
],
xAxis: {
categories: [
'Sun',
'Mon',
'Tue',
'Wed',
'Thu',
'Fri',
'Sat'
],
title: {
enabled: true,
text: null,
},
labels: {
style: {
fontFamily: 'gestaregular',
fontSize: '16px',
color:'#fff'
}
},
plotLines: [
{ // mark the weekend
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 0,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 1,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 2,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 3,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 4,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 5,
dashStyle: 'dash',
zIndex:10
},
{
color: 'rgba(255,255,255,0.3)',
width: 1,
value: 6,
dashStyle: 'dash',
zIndex:10
}],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
},
yAxis: {
labels: {
enabled: false
},
title: {
enabled: true,
text: null,
}
},
legend: {
enabled: false
},
minorTickLength: 0,
tickLength: 0
});
});
function _bindCustomEvents()
{
var chart = $('#container').highcharts();
chart.setTitle({ text: ''});
$('.highcharts-axis').hide();
$('.highcharts-grid').hide();
$('.highcharts-axis').find('path').hide();
}
FIDDLE LINK
This is how I want it to look like : Instead of '2' in the top circles , it should be the corresponding value from the center spline [1, 2, 5, 3, 6, 7, 4]
1) The plotLines are infinite. The extend as far as the plot area is. So, to limit this, how about you change your yAxis max:
yAxis: {
max: 8,
labels: {
enabled: false
},
title: {
enabled: true,
text: null
}
},
Or, you could create a column series on the points you want and give them a certain value for the height you want. Making the columns thin to mimic your plotLines will help like so:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
data: [8, 8, 8, 8, 8, 8, 8]
},
...
2) Which values in the circles (I am guessing)? The "Series 1: XX"? Or the whole tooltip?
EDIT:
For question 2 you can do this with a formatter function on the dataLabel for the scatter series (your circles). Here is the function:
var customFormatPoint = function (pointX, seriesIndex) {
var theChart = $('#container').highcharts();
var yValue = null;
var points = theChart.series[seriesIndex].options.data[pointX];
return points;
};
You call this from:
series: [{
name: '',
type: 'column',
pointWidth: 1,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
return customFormatPoint(this.point.x, 1);
}
},
data: [7.70, 7.70, 7.70, 7.70, 7.70, 7.70, 7.70]
}, {...
Key element here is that you have this.point.x which is that scatter point's xAxis location. You then need to send in which index the series is that contains the y value you want to show in the dataLabel.
I have also removed the plotLines and created a series that just contains the bars with width of 1 and no border. I had to mess around to get the end of the bar (its max value) to coincide with the scatter circle diameter.
Please see this jsFiddle.
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.
Is it possible to move the y-position of the x-axis in highcharts? So far, I have only been able to move it to the top or bottom of my chart using
opposite: true/false
but now I need it to be in the middle of my graph, at a fixed y-value. My current code is
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
type: 'spline',
renderTo: 'container'
},
title: {
text: 'Title'
},
xAxis: {
opposite: true,
min: 0,
max: 4,
reversed: true,
startOnTick: true,
endOnTick: true,
lineWidth: 1
},
yAxis: {
labels: {
enabled: true
},
title: null,
gridLineWidth: 0,
min: 1,
max: 3.1
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
marker: {
enabled: false
},
name: 'Year 1800',
data: [
[1, 1],
[2.5, 1]
],
showInLegend: false
}, {
marker: {
enabled: false
},
name: 'Year 1900',
data: [
[1.5, 2],
[3, 2]
],
showInLegend: false
}, {
name: 'name1',
data: [
[2, 3]
],
type: 'scatter',
zindex: 10
}, {
name: 'name2',
data: [
[3, 3]
],
type: 'scatter'
}, {
name: 'name3',
data: [
[1.5, 3]
],
type: 'scatter'
}]
});
});
});
My JSfiddle is http://jsfiddle.net/5xum/fVpqU/7/ .
I want the x axis (along with the ticks and labels) to run through y=2.5, between the two different data sets. Does HighCharts support this?
You can use offset property to move xAxis. In your case you have to use negative offset to move xAxis down:
xAxis: {
opposite: true,
min: 0,
max: 4,
reversed: true,
startOnTick: true,
endOnTick: true,
lineWidth: 1,
offset: -130
},
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text : <%=jtitle%>
},
xAxis : {
min:Date.UTC(2016, 0, 0),
max:Date.UTC(2016, 11, 1),
//allowDecimals: false,
type : 'datetime',
tickInterval : 24 * 3600 * 1000*30, //one day
labels : {
rotation : 0
},
},
yAxis: {
dateTimeLabelFormats: {
day: '%Y' },
labels :{
formatter:function() {return Highcharts.dateFormat('%Y',this.value);}
},
title: {
text: 'Date'
},
plotLines: [{
value: 0,
width: 5,
color: '#808080'
}]
},
series : [
{
name : 'MB Data',
data : <%=datasp%>,
tooltip: {
valueDecimals: 2,
dateTimeLabelFormats: {
hour: '%H:%M'
}
}
},
{
name : 'Date & Time',
data : <%=datetime%>
},
]
});
});
Could someone please assist me on modifying the code from HighCharts Angular Gauge demo to load data from a comma-separated values file?
The comma-separated values column should be specifiable. i.e: data[0], data[1], data[2]
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});
An Example of comma-separated values data being loaded into Highcharts Demo - Ajax loaded data, clickable points.
$(function () {
// Register a parser for the American date format used by Google
Highcharts.Data.prototype.dateFormats['m/d/Y'] = {
regex: '^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2})$',
parser: function (match) {
return Date.UTC(+('20' + match[3]), match[1] - 1, +match[2]);
}
};
// Get the CSV and create the chart
$.get('/samples/highcharts/demo/line-ajax/analytics.csv', function (csv) {
$('#container').highcharts({
data: {
csv: csv
},
title: {
text: 'Daily visits at www.highcharts.com'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
type: 'datetime',
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
},
yAxis: [{ // left y axis
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}, { // right y axis
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
formatter: function() {
return Highcharts.numberFormat(this.value, 0);
}
},
showFirstLabel: false
}],
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: [{
name: 'All visits',
lineWidth: 4,
marker: {
radius: 4
}
}, {
name: 'New visitors'
}]
});
});
});
Many Thanks,
First of all I see that you have empty series.data which doesn't exists. In case when you download data by ajax, you push your data to series or use i.e setData() / addPoint() functions. All of them are documented here: http://api.highcharts.com/highcharts
I advice to familiar with article about preprocessing data http://docs.highcharts.com/#preprocessing