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.
Related
I need to show highcharts api series name in one line but not able to get it correctly.
When viewport width is larger then it's not an issue but on narrow width the third legend item drops to new line. Due to SVG rendering, I am not able to apply CSS into group element.
In any case active users just wraps to second line and I am not able to set width of parent group element. So far I have tried all legend default options but it didn't work.
So any help would be great.
https://jsfiddle.net/h28jv3zL/
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
align: "left",
x: 0,
y: 0,
itemWidth: 100,
// symbolWidth: 0,
// symbolHeight: 0,
// symbolRadius: 0,
verticalAlign: "top",
layout: "horizontal",
floating: false,
backgroundColor: "white",
shadow: false,
itemStyle: {
"fontWeight": "normal",
"color": "#101010",
"textOverflow": "normal",
"width": "auto",
"white-space": "nowrap",
'padding-right': "10px"
}
},
plotOptions: {
series: {
fillOpacity: 0.1
}
},
series: [{
name: "Inactive Users",
data: [10,11,12],
color: "#D8D8D8",
//showInLegend: false
},
{
name: "New Users",
data: [10,11,12],
color: "#696969",
//showInLegend: false
},
{
name: "Active Users",
data: [10,11,12],
color: "#202020",
//showInLegend: false
},]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
You can add some logic to check the chart.plotWidth and base on that substract series name or hide it inside the labelFormatter callback.
Demo: https://jsfiddle.net/BlackLabel/souphrg9/
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'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]
}]
});
});
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 would like to set at the same level 2 yAxis with highcharts. Because it's difficult to explain what I want, this picture should help you to understand :
I want to align the two "0" value of my 2 charts.
This is my current code :
$(function () {
$('#tresorerieChart').highcharts({
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']
}],
yAxis: [{ // First yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
},
{ // Third yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
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'
}
}, {
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'
}
},
{
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'
}
}]
});
});
Thanks in advance.
Long time ago I have created example how to align two yAxis to the same value, you can find this here: http://jsfiddle.net/5m9JW/414/
Code responsible for linking axes:
var i = 15;
while (chart.yAxis[1].translate(0) != chart.yAxis[0].translate(0) && i > 0) {
chart.yAxis[0].setExtremes(chart.yAxis[0].getExtremes().min - chart.yAxis[0].translate(chart.yAxis[1].translate(0), true));
i--;
};