I want to implement the scrollbar in highcharts, not highstock because it will cost additional money for my company (just for a scrollbar, does not make sense). I have tried this but apparently does not help me:
How to enable highcharts x and y axis scrollbars? .
There are some examples here:
http://jsfiddle.net/fj6d2/3076/
https://www.highcharts.com/blog/news/224-scrollbars-for-any-axis/
but with highstock, I want to do the same thing with Highchart.
From what I have found out Highcharts does not support scrollbars. If I just insert use overflow: scroll on a wrapped div of the chart, that would still make my title center in the middle of a long div and also the y axis will be hidden when I go to the right of that long div.
Is there any way to have ScrollBar with the above things on a highchart (NOT HIGHSTOCK) ?
Here is my option
let options = {
legend: {
itemStyle: {
fontWeight: 'bold',
fontSize: '13px'
},
// width: 780,
itemWidth: 130,
floating: false
},
xAxis: {
position: {align: 'left'},
text: null,
}, // ,
// tickLength: 0
type: 'category',
categories: categories,
min: 0// ,
// max: 10
},
navigator: {
enabled: false
},
scrollbar: {
enabled: true,
showFull: false,
barBackgroundColor: 'rgb(44,89,142)',
barBorderRadius: 0,
barBorderWidth: 0,
buttonBackgroundColor: 'rgb(44,89,142)',
buttonBorderWidth: 0,
buttonArrowColor: 'white'
},
yAxis: {
// minorTickInterval: 'auto',
title: {
/* style: {
textTransform: 'uppercase'
}*/
}, // ,
min: 0,
// max: 20,
},
// General
background: '#FFFFFF',
chart: {
height: 500,
width: 3900,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'column',
backgroundColor: '#FFFFFF',
style: {
fontFamily: 'Lucida Grande, Lucida Sans Unicode, Arial, Helvetica,
sans-serif'
},
borderColor: '#ACB2BC',
borderWidth: 1,
events: { load: function fn() { console.log(this); /* this.width(800);
*/ } } // #container
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
candlestick: {
lineColor: '#404048'
},
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
allowPointSelect: true,
cursor: 'pointer',
data: values,
showInLegend: true
}
},
series: [{
name: 'reports',
data: values
}],
credits: {
enabled: false
}
};
I am using React. I just pass the options to a Highcharts.
this.chart = new Highcharts['Chart'](
this.refs.chart,
this.props.options);
chart.scrollablePlotArea
Since Highcharts v7.1.2, a scrollable plot area can be defined for either horizontal or vertical scrolling, depending on whether the minWidth or minHeight option is set. This does NOT require Highcharts Stock (aka Highstock) to be used.
A demo from the API reference is here and below:
Highcharts.chart('container', {
chart: {
type: 'spline',
scrollablePlotArea: {
minWidth: 700,
scrollPositionX: 1
}
},
title: {
text: 'Scrollable plot area'
},
subtitle: {
text: 'Open on mobile and scroll sideways'
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
}
},
yAxis: {
tickWidth: 1,
title: {
text: 'Wind speed (m/s)'
},
lineWidth: 1,
opposite: true
},
tooltip: {
valueSuffix: ' m/s',
split: true
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
}
},
series: [{
name: 'Hestavollane',
data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6,
5.5, 6.2, 5.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1,
5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7,
9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
}, {
name: 'Vik',
data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2,
0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2,
0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2,
0.7, 1.3, 0.4, 0.3]
}]
});
#container {
max-width: 800px;
min-width: 320px;
height: 400px;
width: 400px;
}
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Related
I am working on highcharts and so much dependency on it so i cant use other plugins
$(function () {
var gaugeOptions = {
'chart': {
'type': 'solidgauge'
},
'title': null,
'tooltip': {
'enabled': false
},
'pane': {
'center': ['50%', '50%'],
'size': '100px',
'startAngle': 0,
'endAngle': 360,
'background': {
'backgroundColor': '#EEE',
'innerRadius': '90%',
'outerRadius': '100%',
'borderWidth': 0
}
},
'yAxis': {
'min': 0,
'max': 100,
'labels': {
'enabled': false
},
'lineWidth': 0,
'minorTickInterval': null,
'tickPixelInterval': 400,
'tickWidth': 0
},
'plotOptions': {
'solidgauge': {
'innerRadius': '90%'
}
},
'series': [{
'name': 'Speed',
'data': [50],
'dataLabels': {
'enabled': true,
useHTML: true,
format: '<div ><span style="font-size:15px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
'<span style="font-size:08px;color:Black">%</span> <br/><br/></div>',
borderWidth: 0
}
}]
};
debugger;
$('#Chart2').highcharts(gaugeOptions);
});
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '50%'],
size: '40%',
startAngle: 0,
endAngle: 360,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
enabled: false
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -20,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#sampleChart').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div ><span style="font-size:15px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span>' +
'<span style="font-size:12px;color:Black">%</span></div>',
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
});
http://jsfiddle.net/mmhukqtz/
this is my chart which i am using i want to give ticks on upper side of circle like this
And Also like this
Thankx For Help
You need to define a seperate pane and axis and set axis offset property to positive value - for the ticks outside the pane - or to negative value - for the ticks inside the pane.
Pane config:
pane: [{
size: '40%',
center: ['50%', '50%'],
background: {
innerRadius: '60%',
outerRadius: '100%'
}
}, {
size: '40%',
background: null
}]
Axis config:
yAxis: [{
min: 0,
max: 200,
tickWidth: 0,
minorTickInterval: null,
labels: {
enabled: false
},
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
]
}, {
linkedTo: 0,
pane: 1,
offset: 20, // offset property controls the distance from the pane
tickInterval: 10,
minorTickInterval: null,
lineWidth: 0,
labels: {
enabled: false
}
}],
Ticks are outside: http://jsfiddle.net/key8v7mn/
Ticks are inside: http://jsfiddle.net/key8v7mn/1/
Try this code in your yAxis:
tickLength: 5,
tickWidth: 4,
tickColor: 'black',
tickPosition: 'outside',
minorTickLength: 0,
tickInterval: 1,
tickInterval does the job.
Updated fiddle:
http://jsfiddle.net/jb242m6o/
tickPosition: "inside" means you will get ticks inside
tickPosition: "outside" means you will get ticks outside
How can I achieve this using highcarts? tired using stops:[...] but it will not work as above image.
yAxis: {
min: 0,
max: 100
},
series: [{
name: 'customers',
data: [{
color: {
//
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0},
stops: [
[0.1, '#009a60'],
[0.2, '#4aa84e'],
[0.3, '#92b73a'],
[0.4, '#c6bf22'],
[0.5, '#edbd02'],
[0.6, '#ffad00'],
[0.7, '#ff8c00'],
[0.8, '#fc6114'],
[0.9, '#f43021'],
[1.0, '#ed0022']
]
},
y:76
}],
dataLabels: {
format: '<div class="prc" style="text-align:center;"><span style="font-weight:normal; font-family:Helvetica Neue, Helvetica, Arial; font-size:52px;' +
'#333' + '">{y}</span>'
}
}]
One way of getting this char could be to use axis line and ticks to cover a chart to create white spaces. Next you could add more points and set stops with a color format that is not supported for a gradient - like hex color format with 3 digits ("#rgb").
Demo: http://jsfiddle.net/bsdtsmyb/
$(function() {
var rawData = 94,
data = getData(rawData);
function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i > 0; i -= 10) {
data.push({
y: i
});
}
return data;
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 10
},
title: {
text: ''
},
subtitle: {
text: rawData,
style: {
'font-size': '60px'
},
y: 200,
zIndex: 7
},
tooltip: {
enabled: false
},
pane: [{
startAngle: -120,
endAngle: 120,
background: [{ // Track for Move
outerRadius: '100%',
innerRadius: '80%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0,
shape: 'arc'
}],
size: '120%',
center: ['50%', '65%']
}, {
startAngle: -120,
endAngle: 120,
size: '95%',
center: ['50%', '65%'],
background: []
}],
yAxis: [{
min: 0,
max: 100,
lineWidth: 2,
lineColor: 'white',
tickInterval: 10,
labels: {
enabled: false
},
minorTickWidth: 0,
tickLength: 50,
tickWidth: 5,
tickColor: 'white',
zIndex: 6,
stops: [
[0, '#fff'],
[0.101, '#0f0'],
[0.201, '#2d0'],
[0.301, '#4b0'],
[0.401, '#690'],
[0.501, '#870'],
[0.601, '#a50'],
[0.701, '#c30'],
[0.801, '#e10'],
[0.901, '#f03'],
[1, '#f06']
]
}, {
linkedTo: 0,
pane: 1,
lineWidth: 5,
lineColor: 'white',
tickPositions: [],
zIndex: 6
}],
series: [{
animation: false,
dataLabels: {
enabled: false
},
borderWidth: 0,
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '80%',
data: data
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container" style="height: 300px;">
</div>
Even this is the old question, I hope the below demo will helpful for the new users:
Demo
http://jsfiddle.net/leongaban/gbqvv0y9/
I've tried to edit the dateTimeLabelFormats key to have the chart use the much more readable Standard time, however no results...
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Wind speed during two days'
},
subtitle: {
text: 'May 31 and and June 1, 2015 at two locations in Vik i Sogn, Norway'
},
xAxis:[{
dateTimeLabelFormats: {
hour: '%H:%M'
},
type: 'datetime',
labels: {
overflow: 'justify'
}
}],
yAxis: {
title: {
text: 'Wind speed (m/s)'
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Light air
from: 0.3,
to: 1.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Light air',
style: {
color: '#606060'
}
}
}, { // Light breeze
from: 1.5,
to: 3.3,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Light breeze',
style: {
color: '#606060'
}
}
}, { // Gentle breeze
from: 3.3,
to: 5.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Gentle breeze',
style: {
color: '#606060'
}
}
}, { // Moderate breeze
from: 5.5,
to: 8,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Moderate breeze',
style: {
color: '#606060'
}
}
}, { // Fresh breeze
from: 8,
to: 11,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Fresh breeze',
style: {
color: '#606060'
}
}
}, { // Strong breeze
from: 11,
to: 14,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Strong breeze',
style: {
color: '#606060'
}
}
}, { // High wind
from: 14,
to: 15,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'High wind',
style: {
color: '#606060'
}
}
}]
},
tooltip: {
valueSuffix: ' m/s'
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
}
},
series: [{
name: 'Hestavollane',
data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
}, {
name: 'Vik',
data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
}],
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
});
Change hour: '%H:%M' to hour: '%I:%M %P'. Here is the updated fiddle.
For more formats refer - http://php.net/manual/en/function.strftime.php
Just figured it out! How to get highcharts dates in the x axis?
dateTimeLabelFormats: {
hour: '%I:%p'
}
Update! This is the new way to swap Military time to Standard time:
dateTimeLabelFormats : {
hour: '%I %p',
minute: '%I:%M %p'
}
I have a basic column chart done in Highcharts.
I would like to 'move' (= use CSS transform: translate()) each column in the chart.
I tried to use CSS styles to achieve this, but it obviously broke the positioning rendered by Highcharts.
Is there any way how to change the existing elements in the callback function?
Thank you
Code:
http://jsfiddle.net/tomexx/vrh5kzzz/10/
$(function () {
var config = {
chart: {
type: 'column',
backgroundColor: 'rgba(40,40,40,1)'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
xAxis: {
categories: [
'Likes',
'Comments',
'Shares'
],
tickColor: 'rgba(83,83,83,1)',
gridLineColor: 'rgba(83,83,83,1)',
gridLineWidth: 1,
minorGridLineColor: 'rgba(83,83,83,1)',
lineColor: 'rgba(83,83,83,1)'
},
yAxis: {
min: 0,
title: {
text: ''
},
gridLineColor: 'rgba(83,83,83,1)',
minorGridLineColor: 'rgba(83,83,83,1)',
lineColor: 'rgba(83,83,83,1)'
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0,
animation: false,
enableMouseTracking: false,
}
},
series: [{
color: 'rgba(126,200,54,1)',
data: [44, 73, 20],
pointPadding: 0.3,
pointPlacement: 0.16
}, {
color: 'rgba(43,205,203,1)',
data: [150, 88, 20],
pointPadding: 0.3,
pointPlacement: 0.04
}, {
color: 'rgba(168,68,214,1)',
data: [63, 33, 10],
pointPadding: 0.3,
pointPlacement: -0.04
}, {
color: 'rgba(255,191,0,1)',
data: [86, 245, 222],
pointPadding: 0.3,
pointPlacement: -0.12
}]
};
$('#container').highcharts(config);
});
Instaed of CSS styles, you can use pointPlacement value with number.
Since Highcharts 3.0.2, the point placement can also be numeric, where
0 is on the axis value, -0.5 is between this value and the previous,
and 0.5 is between this value and the next. Unlike the textual
options, numeric point placement options won't affect axis padding.
i want to update the values as decimals for a guage chart point.update([my decimal value]). But it always points to 10. It works only when i supply an integer value.
Heres the yAxis definition -
yAxis: [{
lineWidth: 0,
min: 0,
max: 10,
tickInterval :100,
tickPosition: 'outside',
minorTickPosition: 'outside',
tickLength: 15,
minorTickLength: 0,
labels: {
distance: 25
},
offset: 5,
endOnTick: false,
title: {
y: -70
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
}],
and the series is
series: [{
name: 'Speed',
data: [{
id: 'hour',
y: 10,
dial: {
backgroundColor: '#DEA12F',
radius: '100%',
baseLength: '5%',
baseWidth: 15,
rearLength: '0%'
}
}],
Here is the pic of the dial with the values
How can make the dial to point to the specified value(0.9)?