We Keep Coding

JS Graphs using positive & negative values (Single line graph)

I want to integrate graph into my website with positive & negative values. If the value is negative then It will go into a red section, if no is positive then it will go into green section.
Right now I am unable to find such type of graph library in javascript, what will be the exact name of this type of graph?
Please let me know the solution.

You can create this type of chart by using Highcharts. Please check the example below:
Highcharts.chart('container', {
chart: {
inverted: true,
height: 80,
events: {
load: function() {
var yAxis = this.yAxis[0],
y = this.plotTop + this.plotHeight / 2,
center = yAxis.toPixels(0);
this.renderer.path([
'M', this.plotLeft, y, 'L', center, y
]).attr({
'stroke-width': 1,
stroke: 'red'
}).add();
this.renderer.path([
'M', center, y, 'L', this.plotSizeY + this.plotLeft, y
]).attr({
'stroke-width': 1,
stroke: 'green'
}).add();
}
}
},
title: {
text: ''
},
credits: {
enabled: false
},
legend: {
enabled: false
},
yAxis: {
title: {
text: ''
},
tickPositions: [-18, 0, 27],
gridLineWidth: 2
},
xAxis: {
visible: false
},
series: [{
type: 'scatter',
data: [21],
marker: {
fillColor: 'orange',
radius: 10
}
}]
});
Live demo: http://jsfiddle.net/BlackLabel/x9vo0tr6/
API: https://api.highcharts.com/highcharts

The closest name I've found is just a "number line", and it looks like this JavaScript library has a specific example of it:
https://jsxgraph.uni-bayreuth.de/wiki/index.php/Number_line
But I think in general you're better off building a custom one-dimensional plot of sorts, with D3.js, for example.

What should I do to make the x-axis of a graph bold with Highchart?

Note that the x-axis here means the horizontal line which corresponds the 0 value, i.e. the desired result is:
However, I can only achieve this.
This is the relevant piece of code:
xAxis: {
lineColor: 'black',
lineWidth: 2
},
How to decide which horizontal line to be bolded?

You can draw a line on the Y-axis at position 0. This causes for a horizontal line to be drawn at value '0'. This is done by the highcharts option plotLines
Highcharts.chart('container', {
yAxis: {
min: -1,
max: 4,
plotLines: [{
value: 0,
color: 'black',
width: 2,
zIndex: 3
}],
},
series: [{
data: [1, 2, 3]
}]
});

Highcharts plotLines with multiple xAxis and yAxis

I have a chart with multiple xAxis and yAxis. I want to have multiple plotLines on the xAxis, but each plotLine doesn't stay on it's course. Here's the fiddle. Click on All to see what I mean.
The plotLine on the first axis goes to the second axis as well. How could I stop it?

There is a solution suggested in the HighCharts issue tracker which involves defining the related xAxis on each yAxis. So a plotline defined on a particular xAxis will use the top and height of the related yAxis to draw the plotline only in the correct area.
yAxis: [{
title: {
text: 'OHLC'
},
height: 200,
lineWidth: 2,
xAxis: 0,
}, {
title: {
text: 'Volume'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
xAxis: 1,
}, {
title: {
text: 'Other data panel'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
opposite: true,
xAxis: 1,
}]
Updated Fiddle with each plotline only on its corresponding pane.
Note that the ability to define related axes appears to be undocumented in the API.

creating MACD on seconadry yaxis in highchart

I'm adding a secondary yaxis using
chart.addAxis({ // Secondary yAxis
title: {
text: 'MACD'
},
top: 360,
height: 87,
offset: 0,
lineWidth: 1,
});
to create MACD by using this
chart.addSeries(
{
color: '#F20',
name: 'MACD',
linkedTo: 'primary',
showInLegend: true,
type: 'trendline',
algorithm: 'MACD',
yAxis: 1,
periods:15
});
The MACD was drawn but not in the secondary axis...its was drawn in the baseline.
I created a jsfiddle for the same please check http://jsfiddle.net/das_palash89/EgYFV/

You should use second index of yAxis yAxis:2, because 1, it is the navigator yAxis.
http://jsfiddle.net/EgYFV/1/

Is it possible to have two Y Axis in a highstock chart from highcharts one on the left and another on the right?

Is it possible to have 2 yAxis in a highstock chart from highcharts one on the left and another on the right ?
Thanks

A very simple example:
First you have to create your new yAxis and set it's position.
{
title: {
text: 'Other data panel'
},
top: 300,
height: 100,
offset: 0,
lineWidth: 2,
opposite: true
}
Then, when you create your serie you in what yAxis it will be placed.
{
type: 'column',
name: 'Other',
data: otherData,
yAxis: 2,
dataGrouping: {
units: groupingUnits
}
}
You can see it working here.