score:0
you can try marginright as below;
$(function () {
var options = {
chart: {
renderto: 'container',
marginright: 300
},
navigator:{
enabled:true
},
scrollbar: {
enabled:true
},
rangeselector: {
enabled: true,
//selected: 1
},
xaxis: {
gridlinewidth: 1,
labels: {
rotation: -45,
align: 'right',
style: {
fontsize: '13px',
fontfamily: 'verdana, sans-serif'
}
}
},
yaxis: [
{
height: 150,
linewidth: 2,
offset: 0,
title: {
text: 'price',
}
},
{
top: 225,
//linewidth: 0,
//min: 0,
//max: 5,
gridlinewidth: 0,
offset: 0,
height: 100,
title: {
text: 'volume',
}
},
],
series: [
{
yaxis: 0,
name: 'price by time',
stack: 0,
//data: [1, 12, 32, 43],
data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
tooltip: {
valuedecimals: 2
},
},
{
name: 'volume by time',
yaxis: 1,
stack: 0,
data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
tooltip: {
valuedecimals: 2
},
linewidth: 3,
marker: {
enabled: false
},
type: 'column',
},
]
};
var chart = new highcharts.chart(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
score:1
you should do next:
1) add margin right for chart(100 for example)
marginright: 100
2) add offset of yaxis with align right of property 'labels':
yaxis: [{
labels:{
align:'right',
x:90
}
}]
3) disable y-axis plot lines for better view (if you want) look at my chart
score:1
unfortunately none of the provided solutions worked ,therefore posting a new solution. please keep in mind this feature works only in highchart and not in highstock
https://jsfiddle.net/donofclass/jmpfzkas/2/
highcharts.setoptions({
global: {
useutc: false
}
});
var options = {
chart: {
type: 'line',
renderto: 'container',
marginright: 100,
animation: false,
events: {
redraw: function (values) {
},
load: function (evt) {
}
}
},
yaxis: [{
height: "60%",
linewidth: 2,
opposite: false
}, {
top: "62%",
height: "35%",
offset: 0,
linewidth: 2,
opposite: false
}],
xaxis: {
type: 'datetime',
gridlinewidth: 1,
datalabels: { enabled: true }
},
boost: {
//usegputranslations: true,
//usepreallocated: true
},
legend: {
itemhiddenstyle: {
color: 'white'
},
layout: 'horizontal',
align: 'right',
verticalalign: 'top',
floating: true,
symbolradius: 0,
symbolpadding: 15
},
plotoptions: {
series: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
linecolor: 'rgb(100,100,100)'
}
}
}, datagrouping: {
enabled: false,
},
pointwidth: 0//width of the column bars irrespective of the chart size
}
},
title: {
text: 'live random data',
align: 'center',
verticalalign: 'bottom',
style: {
// margin: '50px', // does not work for some reasons
color: '#707070',
fontsize: '12px',
fontweight: 'normal',
fontstyle: 'none',
texttransform: 'none'
}
},
exporting: {
enabled: false
},
rangeselector: {
selected: 1,
buttontheme: {
visibility: 'hidden'
}, labelstyle: {
visibility: 'hidden'
},
inputenabled: false,
},
series: [{
name: 'green',
color: 'black',
marker: {
enabled: false
},
data: (function () {
var data = [];
return data;
}())
}, {
name: "green",
type: 'column',
yaxis: 1,
color: '#2dc06a',
visible: true,
data: (function () {
var data = [];
return data;
}())
}, {
name: "red",
type: 'column',
yaxis: 1,
color: '#ed4944',
visible: true,
data: (function () {
var data = [];
return data;
}())
}]
}
var chart=highcharts.chart('container',options);
chart.update({
xaxis:{
max:1523148945
}
})
chart.series[0].setdata([[1523124945,12],[1523125945,14],[1523128945,11]],false);
chart.series[1].setdata([[1523124945,122],[1523125945,142],[1523128945,11]],false);
chart.series[2].setdata([[1523124945,122],[1523125945,142],[1523128945,11]],true);
<script src="https://code.highcharts.com/highcharts.js"></script>
<h1>this feature works only in highchart and not in highstocks<h1>
<div id="container" style="height: 300px"></div>
score:3
i also wanted to add space at the end of the hihghstock chart, i requested the ohlc in a json then save it in a variable after that i pushed 10 point at the end of it
var timestamp = data[data.length-1][0];
//add 10 point at the end for blank space
for(var i=0;i<=10;i++){
var added=[timestamp+(60*i*1000),null,null,null,null];
console.log(added);
data.push(added);
}
the multiplication in the timestamp is because of the json response i get.
Source: stackoverflow.com
Related Query
- How to add space between chart and axis in highcharts
- How to change space value between grid and yAxis in Highcharts line chart
- Highcharts Pie chart how to reduce space between chart and legend caused by plot width
- How do I reduce the space between title and chart of a High Chart?
- HighCharts - Need more space between bottom of chart and Xaxis labels
- How do I transform between datetimes and chart coordinates in Highcharts Renderer?
- Highcharts - column chart has space between bar and xAxis
- How to remove fine white line between halo and Highcharts pie chart
- Adding space between the line and the fill in a Highcharts area chart
- How do you reduce the space between pie chart and legend? (highcharts.js)
- How to add space between plotband and first bar(red color "A" bar) in highchart
- How to create a column range chart in Highcharts using range and navigator functions?
- Highcharts: Remove space between plot border and actual chart
- How do you increase the performance of highcharts chart creation and rendering
- How do you add text to the bottom center of legend and bottom center of chart under legend?
- Add a gap between the second and third series in a Highcharts column plot with four series displayed
- Highcharts - How to remove connecting line between fixed tooltip and point
- Highcharts - best way to handle and display zero (or negative) values in a line chart series with logarithmic Y axis
- Remove space between yAxis and data in highcharts
- How can I do in Highchart to have 1px space between the columns and the y Axis?
- How to add image in Highcharts Title and subtitle
- Highcharts - How can I remove starting and ending padding from area chart
- Highcharts blank chart with x and y axis
- Highcharts padding between plot and graph, how to remove?
- remove tooltip space between border and content highcharts
- Highcharts - Bar - Setting the X axis width and the chart area width to be constant
- Highcharts 3.0, area chart with stacked and unstacked series - how to fix?
- Highcharts - How can I decrease space between categories?
- HighCharts : How to add or remove "chart context menu" from chart container?
- How to use add series and update methods in the high chart wrapper for angular?
More Query from same tag
- datagrouping integration in highcharts not highstock?
- Use exported data from Highcharts Editor in a new React chart
- Highcharts gantt chart : Task progress indicator need to show a single task for various status like completed,inprogress etc with different colors
- Increase the height of the legends in highcharts
- Highcharts tooltips formatter return function throwing Uncaught TypeError: j.call is not a function
- How replicate the value of Y Axis on both sides of the axis in Highcharts
- Hide inactive dates from datetime X-Axis
- highcharts export png files
- Why doesn't highcharts solidgauge charts scale the way I expect?
- Highchart wrapping category labels
- Highcharts Column Chart number LOW but column looks HIGH
- Why is Highcharts not working in PHP?
- Cannot read property 'info' of undefined
- Extjs with HighCharts
- Datatime from CSV file to plot in Highstock JS error
- Highchart display single entry against each category in bar chart
- Highcharts annotations outside the plot area incorrectly placed
- Javascript Reduce Array of Date Value Arrays
- Using HighCharts with Lambda Expression
- Force Highcharts to show last x-axis label
- Highcharts column + line combination chart with multiple series. Issue aligning line over the column
- Highchart plotLines z Index between series z Index
- Add new series to the top of a highcharts stacked column chart
- Highcharts pie chart with expand area
- highchart's hidden chart renders out of container in Angularjs
- Can I use Iron-ajax to load data to polymer/highcharts element
- Build highcharts from oracle with html, java, json
- How can i have the same radius for each point of series with hover?
- HIghchart Treemap - Add double click event on legend click
- Loading multile php Files with Ajax