I am using highstock to create charts in my asp.net MVC application
I have added a navigation along with it i have added a scroll bar
I am viewing 4 charts in a single view, for all charts the horizontal scroll bar is visible only for one as show in the image
In the image the above chart's scrollbar is visible but not for the chart bellow it
But when i move my navigation bar a bit it displays the scrollbar like this
Bellow is my Razor for chart
var chart3 = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift',
resetZoomButton: {
position: {
//align: 'right', // by default
//verticalAlign: 'top', // by default
x: -10,
y: 350,
//height: 25
},
relativeTo: 'chart'
}
},
scrollbar: {
enabled: true,
showFull: false
},
rangeSelector: {
enabled: true,
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
// disabled: { ... }
}
},
inputBoxWidth: 160,
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'black',
fontWeight: 'bold'
},
buttons: [{
type: 'minute',
count: 60 * 6,
text: '6h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 7,
text: '7d'
},
{
type: 'day',
count: 14,
text: '2w'
},
{
type: 'day',
count: 21,
text: '3w'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'all',
text: 'All'
}]
},
navigator: {
enabled: true,
height: 30,
},
//scrollbar: {
// enabled: true,
// barBackgroundColor: 'silver',
// barBorderRadius: 7,
// barBorderWidth: 0,
// buttonBackgroundColor: 'silver',
// buttonBorderWidth: 0,
// buttonArrowColor: 'yellow',
// buttonBorderRadius: 7,
// rilfeColor: 'yellow',
// trackBackgroundColor: 'none',
// trackBorderWidth: 1,
// trackBorderRadius: 8,
// trackBorderColor: '#CCC'
//},
title: {
text: 'Voltage vs Date & Time',
style: {
//color: '#FF00FF',
fontWeight: 'bold'
}
},
xAxis: {
// categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
type: 'datetime'
},
yAxis: {
scrollbar: {
enabled: true,
showFull: false
},
alternateGridColor: '#FDFFD5',
title: {
text: 'Voltage (V)'
}
},
plotOptions: {
line: {
turboThreshold: 50000
},
series: {
marker: {
enabled: true,
symbol: 'circle',
radius: 3
}
}
},
series: [{
name: 'Voltages Phase 1',
color: 'red',
data: arry_voltage_1,
}, {
name: 'Voltages Phase 2',
color: 'yellow',
data: arry_voltage_2,
}, {
name: 'Voltages Phase 3',
color: 'blue',
data: arry_voltage_3,
},
],
});
Any help would be highly appreciated
Remove or comment showFull: false in your scrollbar: {enabled: true, showFull: false}, or set the value to true and it will work surely
Related
I have created one highchart in jsfiddle
Highcharts.chart('container', {
chart: {
type: 'areaspline',
},
title: {
text: 'Soverign Capped 1 year PD',
align: 'left',
backgroundColor: 'gray',
style: {
fontSize: "12px",
}
},
subtitle: {
text: '30 days moving average',
align: 'left',
style: {
color: 'gray',
fontSize: "8px",
}
},
xAxis: {
categories: [
'10/11/2019',
'11/11/2019',
'12/11/2019',
'1/11/2020',
'2/11/2020',
'3/11/2020',
'4/11/2020'
],
min: 0.5,
max: 5.5,
startOnTick: false,
endOnTick: false
},
yAxis: {
title: {
text: 'PD%',
align: 'high',
fontWeight: 'bold'
},
max: 25,
startOnTick: false,
endOnTick: false
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false
},
states: {
inactive: {
opacity: 1
}
},
dataLabels: {
enabled: true,
inside: true,
style: {
fontWeight: "bold",
},
formatter: function() {
if (this.x == "4/11/2020") {
return this.series.name;
}
}
}
},
enableMouseTracking: false,
tooltip: {
enabled: false
},
areaspline: {
fillOpacity: 1,
},
},
series: [{
color: '#fbb189',
name: 'Deitrioting',
showInLegend: false,
data: [25, 25, 25, 25, 25, 25, 25]
},
{
color: '#fff2d0',
name: 'Stable',
showInLegend: false,
data: [3, 4, 5, 5, 4, 10, 10]
}, {
color: '#c2e0b7',
name: 'Improving',
showInLegend: false,
data: [1, 3, 4, 3, 3, 5, 7]
},
{
name: '',
showInLegend: false,
type: 'spline',
data: [7.0, 6.9, 9.5, 12, 23, 4, 3]
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Currently, I have defined different colour for the different series. But for the last date, I want to set the red colour for all the series.
Can you help me with this?
Sample image attached below.
You can use zones:
plotOptions: {
...,
areaspline: {
...,
zones: [{
value: 5.5
}, {
color: 'red',
value: 6.5
}],
},
}
Live demo: https://jsfiddle.net/BlackLabel/m4u5zt8g/
API Reference: https://api.highcharts.com/highcharts/series.area.zones
I have this highchart's jsfiddle and I want the dashed line to go all the way across the graph from 0-10.I have tried this out on a different graph called scatter and it works I want it to work on the type column graph. How do I do this? Is there something in the highcharts api that I am missing?
https://jsfiddle.net/arielkotch/n9dk126y/1/
Highcharts.chart('container', {
chart: {
type: 'column',
renderTo:'#container'
},
title: {
text: ''
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
},
plotOptions: {
column: {
stacking: 'normal',
}
},
series: [{
name: 'John',
borderColor: '#0000FF',
color: '#FFFFFF',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
borderColor: '#0000FF',
color: '#0000FF',
data: [2, 2, 3, 2, 1]
},
{
//5-width
//height
data: [
[4, 10],
[0, 10]
],
lineWidth: 2,
dashStyle: "Dash",
lineColor: 'black',
type: 'scatter',
marker: {
enabled: false
},
showInLegend: false,
enableMouseTracking: false
},
{
data: [
[0, 20]
],
lineWidth: 2,
dashStyle: "Dash",
lineColor: 'black',
type: 'scatter',
marker: {
enabled: false
},
showInLegend: false,
enableMouseTracking: false
}
]
});
To create such type of lines, you should use yAxis.plotLines:
yAxis: {
...,
plotLines: [{
value: 10,
zIndex: 2,
width: 2,
dashStyle: "Dash",
color: 'black',
}]
}
Live demo: https://jsfiddle.net/BlackLabel/ujyrz4h1/
API Reference: https://api.highcharts.com/highcharts/yAxis.plotLines
I have a chart with 4 series plotted, I decided to put two y axis on each side of the graph, which worked. The only trouble I am having is showing all the labels of each y axis, specifically the last one in the series that I have named "Stuff Data", it is apparently using the Voltage data's y axis
Please see:
https://jsfiddle.net/Lprm4ofw/51/
I have tried switching the order of the series and yAxis but always the last one's label would not show up. I also tried playing with the margins in case it's hidden but it is definitely not. What can I try to do to fix it? here is the code:
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
type: 'spline'
},
title: {
text: 'Whatever'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Voltage',
style: {
color: Highcharts.getOptions().colors[2]
}
},
labels: {
format: '{value} V',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
title: {
text: 'Current',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} C',
style: {
color: Highcharts.getOptions().colors[0]
}
},
},
{ // Third yAxis
gridLineWidth: 0,
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[3]
}
},
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[3]
}
},
opposite: true
},
{ // Fourth yAxis
title: {
text: 'stuff',
style: {
color: Highcharts.getOptions().colors[4]
}
},
labels: {
format: 'WHEREAMI',
style: {
color: Highcharts.getOptions().colors[4]
}
},
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 80,
verticalAlign: 'top',
y: 55,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [
{
name: 'Voltage Data',
data: [10.0, 20.79, 13.5, 18.8],
yaxis: 0,
},
{
name: 'Current Data',
yAxis: 1,
data: [1, 2, 3 , 4],
}, {
name: 'Temperature Data',
yAxis: 2,
data: [4, 5, 6 , 9]
}, {
name: 'Stuff Data',
data: [7.0, 6.9, 9.5],
yaxis: 3,
}]
});
You have to use correct property name, xaxis is not the same as xAxis:
series: [
{
name: 'Voltage Data',
data: [10.0, 20.79, 13.5, 18.8],
yAxis: 0,
},
{
name: 'Current Data',
yAxis: 1,
data: [1, 2, 3, 4],
}, {
name: 'Temperature Data',
yAxis: 2,
data: [4, 5, 6, 9]
}, {
name: 'Stuff Data',
data: [7.0, 6.9, 9.5],
yAxis: 3,
}
]
Live demo: https://jsfiddle.net/BlackLabel/6wrahgko/
Am plotting array directly to series of my high chart.I need to show vertical lines in x-axis and horizontal bands in y axis as different colors.
Need to add vertical lines and horizontal bars according to values displayed in chart.
Here is my code:
$('#container').highcharts({
title: {
text: 'Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
credits: {
enabled: false
},
colors: ['red'],
xAxis: {
// categories: [],
title: {
text: 'Time'
},
},
yAxis: {
title: {
text: 'Rate'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Heart Rate',
data: data_arr
}]
});
For that, you can use chart.xAxis[0].categories.length to access the length of xAxis, and chart.xAxis[0].categories[] to access the values of xAxis' elements.
Check the following example:
$(function() {
$('#container').highcharts({
xAxis: {
categories: [10, 20, 30, 40, 50, 60, 70]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
}]
});
// the button action
var hasPlotLine = false,
$button = $('#button'),
chart = $('#container').highcharts();
$button.click(function() {
for (i = 1; i < chart.xAxis[0].categories.length; i++) {
if (chart.xAxis[0].categories[i] > 30) {
chart.xAxis[0].addPlotLine({
value: i,
color: 'red',
width: 2,
id: 'plot-line-1'
});
}
}
});
});
To set up vertical/horizontal lines/Bands use plotBands or/and plotLines options:
For lines:
plotLines: [{
color: '#FF0000',
width: 2,
value: 5.5
}]
For Band
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: Date.UTC(2010, 0, 2),
to: Date.UTC(2010, 0, 4)
}],
You can read more here:
http://api.highcharts.com/highcharts#xAxis.plotBands
http://api.highcharts.com/highcharts#xAxis.plotLines
Check the following example jsfiddle
$(function() {
$('#container').highcharts({
title: {
text: 'Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
credits: {
enabled: false
},
colors: ['red'],
xAxis: {
// categories: [],
title: {
text: 'Time'
},
plotLines: [{
color: 'blue',
width: 1,
value: 1,
dashStyle: 'longdashdot',
zIndex: 3
}, {
color: 'blue',
width: 1,
value: 2,
dashStyle: 'longdashdot',
zIndex: 3
}, {
color: 'blue',
width: 1,
value: 3,
dashStyle: 'longdashdot',
zIndex: 3
}],
zIndex: 3,
},
yAxis: {
title: {
text: 'Rate'
},
plotBands: [{ // mark the weekend
color: '#BEE9B4',
from: 1,
to: 4
}, { // mark the weekend
color: '#EB813B',
from: 4,
to: 6
}, { // mark the weekend
color: '#E93A0F',
from: 6,
to: 8
}],
zIndex: 2,
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
type: 'spline',
name: 'Heart Rate',
data: [4, 5, 1, 2, 8, 7, 4, 1]
}]
});
});
I've written dozens of these charts and have never had this problem. My y-axis labels aren't showing up in this particular chart:
$(function () {
$('#container').highcharts({
chart: {
alignTicks: false,
animation: {
animation: false
},
height: 180,
reflow: true,
width: 425,
zoomType: 'x'
},
credits: {
enabled: false
},
legend: {
enabled: false,
layout: 'horizontal'
},
plotOptions: {
line: {
animation: false,
marker: {
radius: 0
},
stickyTracking: false,
turboThreshold: 5000000,
zIndex: 1
},
spline: {
animation: false,
marker: {
radius: 0
},
turboThreshold: 5000
}
},
title: {
text: ''
},
tooltip: {
backgroundColor: '#303030',
borderColor: 'white',
borderRadius: 0,
borderWidth: 1,
style: {
font: '20pt [FontFamily: Name=Microsoft Sans Serif]',
padding: '10px',
color: 'white'
},
valueDecimals: 0,
valueSuffix: 'F'
},
xAxis: {
categories: ['Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
lineColor: 'black',
lineWidth: 2
},
yAxis: {
endOnTick: false,
gridLineWidth: 0,
lineWidth: 2,
maxPadding: 0,
minPadding: 0,
startOnTick: false,
id: 'ForecastData',
lineColor: 'black',
linkedTo: 0,
offset: 0,
title: {
text: ''
},
type: "linear"
},
exporting: {
buttons: {
exportButton: {
enabled: false
},
printButton: {
enabled: false
}
},
enabled: false
},
series: [{
data: [33, 31, 35, 33, 36, 37, 36],
labelText: 'Daily Min Temperature',
name: 'Daily Min Temperature',
type: 'spline',
color: '#2177E0'
}]
});
});
http://jsfiddle.net/5QBzv/
I can't seem to figure out what I'm missing. Any ideas?
Thanks!
Try replacing your x and y axis with this
xAxis: {
categories: ['Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
lineColor: 'black',
lineWidth: 2
},
yAxis: {
title: {
text: 'DATA'
},
lineColor: 'black',
lineWidth: 2
categories: ['1', '2', '3', '4', '5', '6', '7'],
},
Or remove the linkedTo from your code.