I try to draw a chart. Negative values are not drawing. Here is a link of picture:
new Highcharts.chart('container', {
chart: {
type: 'spline',
plotBorderWidth: 1,
zoomType: 'xy',
panning: {
enabled: true,
type: 'xy'
},
panKey: 'shift'
},
rangeSelector: {
selected: 1
},
title: {
text: 'David'
},
xAxis: {
min: -1,
max: 2,
title: {
text: "dcjdkjckjdkc"
}
},
yAxis: {
min: -120,
max: 120,
title: {
text: "dcjdkjckjdkc"
}
},
series: [{
name: 'AAPL Stock Price',
data: [-1, 0, -2, 1],
type: 'spline'
}, {
name: 'black',
data: dataRealGraph,
}]
});
Related
I'm playing with the apexchart.js library and getting this mismatched graph. I want to display an area graph, where the X line is a collection of date-times and the Y line has some values (floating type).
On the picture, you can see the library set the bad zero point for some series.
Here are my settings for the graph.
let options = {
chart: {
height: 390,
type: 'area',
stacked: false
},
dataLabels: {
enabled: false
},
series: [{
name: "Power – Total",
data: powerTotal,
type: 'area'
},
{
name: "Power – Solar A",
data: powerSolarA,
type: 'area'
},
{
name: "Power – Solar B",
data: powerSolarB,
type: 'area'
},
{
name: "Consumption",
data: consumption,
type: 'area'
},
{
name: "Battery",
data: batteryPower,
type: 'area'
},
{
name: "Grid",
data: gridPower,
type: 'area'
},
],
xaxis: {
type: 'datetime',
categories: datetimes,
labels: {
datetimeUTC: false
}
},
yaxis: [
{
seriesName: 'Power – Total',
title: {
text: "kW"
},
decimalsInFloat: 2,
showAlways: true,
floating: false,
},
{
seriesName: 'Power – Solar A',
show: false,
floating: false,
},
{
seriesName: 'Power – Solar B',
show: false,
floating: false,
},
{
seriesName: 'Consumption',
show: false,
floating: false,
},
{
seriesName: 'Battery',
show: false,
floating: false,
},
{
seriesName: 'Grid',
show: false,
floating: false,
},
],
markers: {
size: 0,
hover: {
size: undefined,
sizeOffset: 3
}
},
colors: lineColors,
tooltip: {
x: {
format: "dd:MM:yyy HH:mm"
}
},
fill: {
opacity: .6,
type: 'solid'
},
stroke: {
show: true,
curve: 'straight',
width: [2, 2, 2, 2, 2, 2, 4]
},
grid: {
show: true
},
legend: {
itemMargin: {
vertical: 24
}
}
};
Does anybody know what it can be?
Thanks
How to make changes in highcharts time series zoomable chart to get similar to the one mentioned in below link:
https://www.highcharts.com/demo/line-time-series
Used JS :
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json',
function (data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
}
);
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>
Been trying to get Highcharts to work, but getting the JSON is not working...
My JSON is just copied data from their examples but on my own servers:
JSON Data
And my Javascript is:
$.getJSON('./servercount.json', function(data) {
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
data: {
data: data
},
title: {
text: 'CakeBot Stats'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Value'
}
},
legend: {
enabled: true
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [
{
type: 'area',
name: 'Servers',
data: data
},
{
type: 'area',
name: 'Members',
data: data
}
]
});
});
The graph just wont load: http://cakebot.club/stats
Any ideas?
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%>
},
]
});
});