Related
So, I want to set x-axis range from January to December. so x_data and y_data are dynamic for example x_data = [ 'Jan', 'Feb] and y_data = [10, 20]. So the graph shows me only two value at x-axis(jan and feb only) but I want all the months at x-axis if the data is not available . I have tried to set the range of xaxis to ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] but it is not working. (code below)
var trace1 = {
x: x_data,
y: y_data,
type: 'bar',
marker: {
color: '#FEDB41',
}
};
var data = [trace1];
var layout = {
xaxis: {
type : 'category',
categoryorder : "array",
categoryarray : MONTHS,
zeroline: false,
showline: false,
tickfont : {
size : 10,
color : 'white'
},
// type: 'date',
automargin: true,
tickformat: '%d, %b',
range:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
"yaxis": {
"visible": false,
"showgrid": false,
"zeroline": false
},
// barmode: 'group',
margin: {
l: 2,
r: 2,
b: 20,
t: 2,
},
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
};
Plotly.newPlot(div_id, data, layout, {displayModeBar: false});
var trace1 = {
x:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
y: [10,20,30,40,0,0,0,0,0,0,0,0],
type: 'bar',
marker: {
color: '#FEDB41',
}
};
var data = [trace1];
var layout = {
xaxis: {
type : 'category',
categoryorder : "array",
zeroline: false,
showline: true,
tickfont : {
size : 10,
color : 'black'
},
// type: 'date',
automargin: true,
autorange:false,
tickformat: '%d, %b'
},
"yaxis": {
"visible": false,
"showgrid": false,
"zeroline": false
},
// barmode: 'group',
margin: {
l: 2,
r: 2,
b: 20,
t: 2,
},
paper_bgcolor: 'rgba(0,0,0,0)',
plot_bgcolor: 'rgba(0,0,0,0)',
};
Plotly.newPlot("chart", data, layout, {displayModeBar: false});
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart"></div>
Range is available for type number and date. It is not available for string. You could just append values which are not available to 0.
Hope this helps to some extent.
I have data like this
x axis = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] and
y axis = ["Aged 1-12", "Aged 13-20 years", "Aged 21-30 years"]
Now, I want to point x axis with y axis and I am not sure what kind of data format I should enter in data field of Highchart.
I have tried with this input data [1,2,3,4,5] but it shows wrong point on chart. Here is graph I have tried with data
Here is code I have written :
Highcharts.chart("c5312209", {
chart: {
type: 'line'
},
title: {
text: "Z test"
},
tooltip:{
enabled: false
},
yAxis: {
allowDecimals: false,
labels: {
formatter: function(){
var d = {"1":"Aged Under 10 Years Old","2":"Aged 11-15 Years Old","3":"Aged 16-17 Years Old","13":"Aged Over 101 Years Old"};
return d[this.value];
}
},
title: {
text: ''
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title: {
text: 'Time'
}
},
series: [{data: [0, 0, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0]}]
});
Please help me to solve this issue.
Thank you in advance.
If you have one point for each month, then giving data as you have done series: [{data: [0, 0, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0]}] is a good option.
If you want to set points only for some months you can explicitly state the x value like this:
series: [{data: [{x:0, y: 0}, {x: 1, y: 0}, {x: 2, y: 13}...]}]
In your config there was an issue with the formatter (y ticks are getting placed at the wrong values compared to the labels), here is a working example: https://jsfiddle.net/ewolden/me9pyzqv/14
From the comment, to hide a series from the legend, or remove the series name, the following can be done:
You can either do: series: [{name: '', ...}] which will set the name to nothing. Or series: [{showInLegend: false,...}] which will remove the series from the legend.
i'am creating a highcharts that represent time ex : (02:00:00) on the yAxis and Dates on xAxis but i didn't found how to change the yAxis series type to do it .
here is my code :
$(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: ["02:00:00","03:00:00","01:00:00"]
}]
});
});
I've got a chart with two x axis side-by-side, with one series in each. When I float over the Series 1 data, I see the tooltip, as expected. When I float over Series 2 data, it highlights the line, but no tooltip. However, if I move the cursor to the left at the same height as the data in Series 2 data, but above the Series 1 data, the tooltip shows the Series 2 information, and the Series 2 points are highlighted. Here's an example:
http://jsfiddle.net/q0gphwx2/5/
Is there a way to correct for this?
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
plotOptions : {
area : {
stacking : 'normal',
}
},
title: {
text: 'Tooltip Hover Anomoly'
},
subtitle: {
text: 'Float over Series 2 data, then stay at same height, but over series 1. '
},
xAxis: [{
width:300,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},{
left: 400,
width: 300,
offset:0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [{ // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
tooltip: {
shared: false
},
series: [{
name: 'Series 1',
type: 'line',
xAxis: 0,
stack: 0,
data: [10, 20, 30, 40, 50, 40, 30, 20, 10, 20, 30],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Series 2',
type: 'line',
xAxis: 1,
stack: 1,
data: [100, 120, 100, 120, 100, 120, 100, 120, 100, 120, 100, 120],
tooltip: {
valueSuffix: ' mm'
}
}]
});
});
Unfortunately it is known bug, reported to our developers here
Adding a second axis like that (using widths, left, offset, etc...) just to space out two years seems very problematic. Instead, use one axis, extend the categories through two sets of months and then start the second series at point 12:
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
series: [{
name: 'Series 1',
type: 'line',
data: [10, 20, 30, 40, 50, 40, 30, 20, 10, 20, 30],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Series 2',
type: 'line',
pointStart: 12, // start this one at 12
data: [100, 120, 100, 120, 100, 120, 100, 120, 100, 120, 100, 120],
tooltip: {
valueSuffix: ' mm'
}
}]
Updated fiddle.
I am trying to add a plot line to a bar chart but it isn't showing up. All of the examples of plot lines I have found have to do with line charts but I don't see anything in the documentation that says plotlines don't work with bar. I tried adding the plotline when I initialized the chart and adding it after the fact and neither way works.
Here is the example I am testing with.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
legend: {
layout: 'vertical',
floating: true,
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
y: 60,
x: -60
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 80,
zIndex: 5
}],
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
plotLines is a sub-option of the yAxis or xAxis config and not a base option as you have it:
<SNIP>
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
plotLines: [{
color: '#FF0000',
width: 2,
value: 80,
zIndex: 5
}]
},
<SNIP>
Update fiddle here.
Axis.addPlotLine() api allows to add a line in the axis after the chart has been rendered .
var plotOption = {
color: '#FF0000',
dashStyle: 'ShortDash',
width: 2,
value: 1000,
zIndex: 0,
label : {
text : 'Goal'
}
};
this.lineChart.yAxis[0].addPlotLine(plotOption) ;
//where lineChart is the reference to the existing chart