I try using highchart in react-native to show 6 data from the state, and it works the data shown. But because the 6 data have same X and Y, so the data were shown but stacking so it looks like there is only one data (the X is the time when the data get the post, and the Y the day when the data get the post). Is there any way to make the data all appear in the chart.
This is the chart look like :
This is my highchart conf :
var conf= {
chart: {
type: 'scatter',
backgroundColor: '#233767',
zoomType: 'xy',
},
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
},
style:{
color:'white'
}
},
},
yAxis: {
type: 'datetime',
lineWidth: 1,
dateTimeLabelFormats: {
minute: '%H:%M'
},
labels: {
style:{
color:'white'
}
},
title: {
enabled: false
},
gridLineColor:'transparent'
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: false,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br/>' +
Highcharts.dateFormat('%H:%M:%S', this.y);
},
},
credits: false,
exporting: false,
legend: {
itemStyle: {
color: '#FFFF',
fontWeight: 'bold'
}
},
title: false,
series: this.state.chartState
}
You can for example distinguish points by using different radius:
series: [{
data: [
[10, 10]
],
marker: {
radius: 10
}
}, {
data: [
[10, 10]
],
marker: {
radius: 5
}
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/tm0v6fw4/
API Reference: https://api.highcharts.com/highcharts/series.scatter.marker.radius
Or use multiple axis with different scale:
series: [{
data: [
[10, 10]
]
}, {
data: [
[10, 10]
],
yAxis: 1
}, {
data: [
[10, 10]
],
yAxis: 2
}]
Live demo: https://jsfiddle.net/BlackLabel/qwj4mu7n/
API Reference: https://api.highcharts.com/highcharts/yAxis
Related
How can I enable only the left most Highcharts XAxis plot line on DateTime Line chart. I suppose there should be a default option to display XAxis line without needing to know the minimum/start value
My progress so far -> https://jsfiddle.net/Lpjb9wc7/
const chart = Highcharts.chart('container', {
credits: {
enabled: false,
},
title: null,
xAxis: {
title: 'Session',
type: 'datetime',
tickInterval: 3600 * 1000,
gridLineWidth: 1
},
yAxis: {
gridLineWidth: 0,
title: {
text: 'Temperature',
},
},
legend: {
enabled: false,
},
plotOptions: {
series: {
marker: {
enabled: false,
},
},
},
series: [
{
data: [
[1369206795000, 1],
[1369225421000, 3],
[1369230934000, 2],
],
},
],
});
You need to change the dafault value of the lineWidth property.
yAxis: {
lineWidth: 1,
...
}
Live demo: https://jsfiddle.net/BlackLabel/49078gLx/
API Reference: https://api.highcharts.com/highcharts/yAxis.lineWidth
I am using highchart with jquery .I am able to show X-axis with label (Apple,pears)..But I want to show Y-axis without lable .In other words I want to show a straight line on Y-axis.
here is my code
http://jsfiddle.net/3sembmfo/118/
$(function () {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches']
},
yAxis: {
allowDecimals: false,
title: {
text: 'Fruit'
},
visible: false
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
});
This can, and should, be resolved by options:
yAxis.lineWidth - to enable the line
yAxis.title.text - to hide the title
yAxis.gridLineWidth - to disable horizontal lines,
yAxis.labels.enabled - to disable labels
Working demo: http://jsfiddle.net/BlackLabel/3sembmfo/122/
Snippet:
yAxis: {
allowDecimals: false,
title: {
text: null
},
labels: {
enabled: false
},
gridLineWidth: 0,
lineWidth: 1,
visible: true
},
Replace your y Axis code with this. http://jsfiddle.net/3sembmfo/119/. If you have any query let me know.
yAxis: {
allowDecimals: false,
labels:{
style: {
fontSize:'0px'
}
},
title: {
text: 'Fruit',
style: {
fontSize:'0px'
}
},
visible: true
},
You have to use Highcharts.SVGRenderer and add line using load event.
chart: {
type: 'column',
events: {
load: function() {
var ren = this.renderer;
ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
.attr({
'stroke-width': 1,
stroke: '#000'
})
.add();
}
}
},
Fiddle demo
$(function() {
// Configure the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
load: function() {
var ren = this.renderer;
ren.path(['M', 10, 10, 'L', 10, this.chartHeight * .8])
.attr({
'stroke-width': 1,
stroke: '#000'
})
.add();
}
}
},
title: {
text: 'Highcharts axis visibility'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Peaches'],
},
yAxis: {
allowDecimals: false,
title: {
text: ''
},
labels: {
enabled: false
},
gridLineWidth: 0,
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true
}
}
},
series: [{
data: [1, 3, 2, 4],
name: 'Ola'
}, {
data: [5, 4, 5, 2],
name: 'Kari'
}]
});
var yVis = false,
xVis = true;
});
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/4.1.9/highcharts.js"></script>
<div id="container"></div>
Hi there I would like to draw a chart with a three lines in Highchart. Two of them can shows results as shown in the data [4.12,3.34,5.45] / [3.45,5.45,3.23] but the third line should be visibe without any comma. Resuls should be like [7,4,2]
code:
$(function () {
$('#container').highcharts({
title: {
text: '',
x: -20 //center
},
colors: ['blue', 'red'],
plotOptions: {
line: {
lineWidth: 3
},
tooltip: {
hideDelay: 200
}
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: [
''
]
},
yAxis: [{
min: 0,
title: {
text: ''
}
}, {
title: {
text: ''
},
opposite: true
}],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:.0f} h</b><br/>',
valueSuffix: ' h',
crosshairs: true,
shared: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 1
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y,2);
}
},
enableMouseTracking: true
}
},
series: [{
name: '1',
color: 'rgba(51, 204, 204, 0.75)',
lineWidth: 2,
data: [4.12,3.34,5.45]
}, {
name: '2',
color: 'rgba(255, 77, 77,0.75)',
marker: {
radius: 6
},
data: [3.45,5.45,3.23]
},{
name: '3',
color:'#bfbfbf',
marker: {
radius: 6
},
data: [7.34,4.23,1.78]
}]
});
});
http://jsfiddle.net/bmv5e8v7/3/
Can you guys help in this?
In addition to what #BarbaraLaird wrote, you can also define format of data labels for only one series, like this:
dataLabels: {
format: '{y:.0f}'
}
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.format
Example:
http://jsfiddle.net/ozvgfkj0/
You can add a conditional to your dataLabels formatter function:
dataLabels: {
enabled: true,
formatter: function() {
if (this.series.name == '3')
return Highcharts.numberFormat(this.y, 0);
else
return Highcharts.numberFormat(this.y, 2);
}
},
http://jsfiddle.net/blaird/bmv5e8v7/4/
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%>
},
]
});
});
I am using Highcharts to create a chart:
http://dev.speechlink.co.uk/David/sixthiteration/home.php
When scaling however, it seems to chop part of the right side of the chart off...I'm not entirely sure why..?
Here is my code:
jQuery:
chart = new Highcharts.Chart({
chart: {
renderTo: 'summarycontainer',
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: 'No. Entries Submitted This Month',
style: {
fontSize: 10
}
},
xAxis: {
lineWidth: 1,
lineColor: '#999999',
title: {
text: 'x-axis'
}
},
yAxis: {
title: {
text: 'y-axis'
},
labels: {
y: 2
},
lineWidth: 1,
lineColor: '#999999',
gridLineWidth: 1,
gridLineColor: '#eaeaea',
startOnTick: false,
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
},
series: [{
type: 'scatter',
name: '',
data: [10, 20, 10, 20, 2, 3, 1, 9],
lineColor: '#f6a828',
color: '#418ed6'
}],
});
});
And in my HTML, I have a div container:
<div id = "summarycontainer" style="width: 250px; height: 250px"></div>
In code above you have:
data: [10, 20, 10, 20, 2, 3, 1, 9],
and in source of page thre is:
data: [10, 20, 10, 20, 2, 3, 1],
Maybe that you think the plot chops last dot?
edit:
Add: categories: ['', ''] to your xAxis :
xAxis: {
categories: ['', ''],
lineWidth: 1,
lineColor: '#999999',
title: {
text: 'x-axis'
}
},
In my opinion there is a bug in highcharts.
edit 2:
For formatting tooltip use (below is only example!):
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},