I'm new to Highcharts and I need help creating a graph that looks like the one displayed in the picture below.
Really would appreciate the help on this.
Use gridLineWidth to set the width of the grid: gridLineWidth: 2,
Be sure to set the gridZIndex to a higher number to get it over the series: gridZIndex: 4.
To reduce the columns' space use poitPadding and groupPaddingenter code here under plotOptions.
pointPadding: 0,
groupPadding:0,
Check the example (jsfiddle)
$('#container').highcharts({
chart: {
type: 'column',
backgroundColor: '#000000',
plotBackgroundColor: '#808080'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
],
gridLineWidth: 2,
gridZIndex: 4,
gridLineColor:'#000000'
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
gridLineWidth: 2,
gridZIndex: 4,
gridLineColor:'#000000'
},
plotOptions: {
series: {
pointPadding: 0,
groupPadding:0,
borderColor:'#808080',
}
},
series: [{
name: 'Tokyo',
color:'#D2691E',
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]
}]
});
});
Related
i'm trying to make a chart that shows two diferent sets of data.
Both are distributed in 12 month, but one set of data is only relevant from the current month onwards.
I have something like this example (JSFiddle)
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
data: [4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
pointStart: 1
}]
});
My problem is that i would like to show the data from before the start of the second data with one single column.
For example, in the JSFiddle linked above i'd like to se January as a wider column instead of the thin one with an empty space on the right. Is that possible?
Thanks for reading.
For example, in the JSFiddle linked above i'd like to se January as a
wider column instead of the thin one with an empty space on the right.
Is that possible?
It is possible, however it will require a bit of custom code. The better solution is to centre the single column.
Code:
var maxGroupedColumns = 0;
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function() {
var newSeriesArr = [],
chart = this,
groupedSeries = {},
pointOffset;
// create a new series for each point
for (var i = chart.series.length - 1; i >= 0; i--) {
var series = chart.series[i];
var pointsInSeries = series.points.length;
for (var j = pointsInSeries - 1; j >= 0; j--) {
var point = series.points[j];
// omit the point if its y value equals to 0
if (!point.y) {
continue;
}
// make sure that x property of each point is initialized
point.options.x = point.x;
var newSeriesOptions = {
data: [point.options],
// move relevant options from the original series
color: series.color,
name: series.name,
// linking series items in legend
linkedTo: series.options.id
};
if (!groupedSeries[point.x]) {
// create group
groupedSeries[point.x] = [];
}
// create series and assign it to group
groupedSeries[point.x].push(chart.addSeries(newSeriesOptions, false));
if (groupedSeries[point.x].length > maxGroupedColumns) {
// update max grouped columns number
maxGroupedColumns = groupedSeries[point.x].length;
}
point.remove(false);
}
//series.remove(false);
series.setData([]);
}
// handle pointPlacement for each series
pointOffset = 1 / maxGroupedColumns;
for (var x in groupedSeries) {
var group = groupedSeries[x];
group.forEach(function(series, index) {
series.update({
pointPlacement: pointOffset * index - ((group.length - 1) * pointOffset) / 2,
}, false);
});
}
chart.redraw();
}
}
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
grouping: false,
pointRange: 1,
pointPadding: 0.25,
}
},
series: [{
name: 'Tokyo',
id: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
id: 'London',
data: [null, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
Demo:
https://jsfiddle.net/wchmiel/1wph8ojx/3/
I have a line chart like this:
http://jsfiddle.net/vbLdsodu/
How do i remove or hide the line after july? I want the date axis to continue but don't show the line where the values is 0.
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 0, 0, 0, 0, 0]
}]
});
});
You can replace 0 with null in the data which will then keep the axis listing the months, but stop the line from drawing.
It's also possible to do this part way through the graph and the line will draw from the next data point.
Is it possible to have the number of decimal places fixed consistently throughout the y-axis tick values?
yes it is possible, just use the format option under labels:
yAxis: {
labels:{format:'{value:.2f}'}
},
Adjust the number before the f to set the elements' number you would like to have after the comma.
Check the jsfiddle exanmple:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
labels:{format:'{value:.2f}'}
},
series: [{
name: 'Tokyo',
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]
}]
});
});
I have a serie name with special character that I cannot change. How I can show it? I tried legend: { useHMTL: true }, but it's not working.
My code is here:
$(function () {
$('#container').highcharts({
title: {
useHTML: true,
text: 'Monthly Average Temperature'
},
subtitle: {
useHTML: true,
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
title: {
text: 'City<br/><span style="font-size: 9px; color: #666; font-weight: normal">(Click to hide)</span>',
},
layout: 'vertical',
x: -10,
y: 100
},
series: [{
name: '<Tokyo>',
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]
},{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
http://jsfiddle.net/4x6susks/
It isn't working to <Tokio> legend
Replace in name: < with <. Otherwise legend will use that name as tag (like <span> or <div>). See demo: http://jsfiddle.net/4x6susks/3/
I am using a simple linechart.
See this example: http://jsfiddle.net/w0do5vus/5/
I want to display just a partial width of the series(including the markers).
How can I achieve this? For the line I manage to hide it, but the markers are still visible.
Thanks in advance.
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
var chart = $('#container').highcharts();
chart.clipRect.attr({
width: 200
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 300px"></div>