I am using Highstock to visualize some data for my web application.
The data is displayed as steps (that is one value is held until a new one takes over), however the navigator of Highstock seems to use the spline algorithm on the data. I would rather like it to display as "blocks" like the main chart.
I have tried adding step: "true" to navigator.series in the options, but it does not seem to matter.
Does anyone know a way to do this with the Highstock API? I have been digging into the documentation for a while without any luck.
Code used to initialize highstock chart:
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: true,
selected: 0,
buttons: [{
type: 'day',
count: 1,
text: 'Day'
}, {
type: 'week',
count: 1,
text: 'Week'
}]
},
series: [{
name: 'Light level',
data: data,
type: 'area',
step: true,
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, "#fff800"],
[1, Highcharts.Color("#fff800").setOpacity(0).get('rgba')]
]
}
}],
yAxis: {
labels: {
formatter: function () {
if (this.value > 0) return "" + this.value + "%";
return "";
}
},
plotLines: [{
value: 0,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: '0%',
align: "right"
}
}, {
value: 100,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: '100%',
align: "right"
}
}],
tickPositions: [0, 25, 50, 75, 100]
},
credits: {
enabled: false
},
navigator: {
//enabled: false
}
});
I have also created a jsfiddle with example data.
http://jsfiddle.net/EJZ5x/
According to docs - step option isn't supported.
However, when you set directly type for navigator, it works! See: http://jsfiddle.net/EJZ5x/1/
navigator: {
series: {
type: 'area',
step: 'left'
}
}
Related
I'm using Highcharts' x-range chart module to render a range of multiple values. I have a couple of issues in implementing it.
The hover and select states are not having any effect on the chart
The legend icon is not showing the color of the data
Code below:
var myChart7 = Highcharts.chart('sample', {
chart: {
type: 'xrange',
},
title: null,
xAxis: {
opposite: true,
labels: {
useHTML: true,
formatter: function() {
return this.value + "ms";
},
}
},
yAxis: {
title: {
text: ''
},
labels: {
enabled: true,
},
categories: [],
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
enabled: true
},
allowPointSelect: true,
states: {
hover: {
color: '#a4edba'
},
select: {
color: '#EFFFEF',
borderColor: 'black',
dashStyle: 'dot'
}
},
pointWidth: 15,
borderRadius: 10,
dashStyle: 'Solid',
}
},
legend: {
enabled: true,
align: 'left',
},
series: [{
color: '#C4D9FF',
name: 'Sample 1',
data: [{
x: 0,
x2: 90,
y: 0,
response: '200',
color: '#C4D9FF',
borderColor: '#789CDF',
}],
},
{
color: '#FFD7C5',
name: 'Sample 2',
data: [{
x: 5,
x2: 70,
y: 1,
response: '200',
color: '#FFD7C5',
borderColor: '#F99B6F',
}],
}, {
color: '#DCFFF5',
name: 'Sample 3',
data: [{
x: 35,
x2: 70,
y: 2,
response: '400',
color: '#DCFFF5',
borderColor: '#35C097',
}],
}
],
});
<div id="sample">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highstock.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/modules/xrange.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.4/highcharts-more.js"></script>
JSFiddle link
I don't know if I'm implementing it in the right or wrong way. Please guide me. TIA.
I'm working on Chrome version 85 on mac. Haven't tested it on other browsers.
Those features hasn't been implemented in the version of the Highcharts which you are using. In the current version everything works fine: https://jsfiddle.net/BlackLabel/trxjw4np/
In the x-range series type the legend item doesn't inherit the color from the series, but you can set it programmatically.
Demo: https://jsfiddle.net/BlackLabel/trxjw4np/
events: {
load() {
let chart = this;
chart.legend.allItems.forEach(item => {
item.legendSymbol.css({
fill: item.userOptions.color
})
})
}
}
API: https://api.highcharts.com/highcharts/chart.events.load
I am trying to make the chart with both text label on xAxis and yAxis like this
Example
I am able to make it by this configuration
$(function() {
var chart = Highcharts.chart('chart-container', {
chart: {
type: 'bar',
},
title: {
text: '',
floating: true
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y:.2f}</b><br/>'
},
xAxis: {
gridLineColor: '#7F7F7F',
lineColor: '#7F7F7F',
gridLineWidth: 1,
tickLength: 0,
labels: {
align: 'left',
reserveSpace: true
},
categories: ['1. - 4. trinn (frivillige øvelser)', '1. - 4. trinn (obligatorisk ferdighetsprøve)', '5. - 7. trinn (frivillige øvelser)', '8. - 10. trinn (frivillige øvelser)']
},
yAxis: {
min: 31.83333,
max: 100,
title: {
text: null
},
gridLineWidth: 1,
tickLength: 0,
gridLineColor: '#7F7F7F',
lineColor: '#7F7F7F',
categories: {
'33.33333': 'Må øve mer',
'66.66667': 'På god vei',
'100': 'Kan'
},
tickPositions: [0, 33.33333, 66.66667, 100],
plotBands: [{
from: 31.83333,
to: 33.33333,
color: '#CC3333'
}, {
from: 65.16667,
to: 66.66667,
color: '#F2BA38'
}, {
from: 33.33333,
to: 34.83333,
color: '#CC3333'
}, {
from: 66.66667,
to: 68.16667,
color: '#F2BA38'
}, {
from: 97,
to: 100,
color: '#77B800'
}]
},
plotOptions: {
series: {
pointPadding: 0,
borderWidth: 0
}
},
series: [{
name: '',
color: '#646464',
borderColor: '#464646',
borderWidth: 1,
data: [0, 66.6666666666667, 0, 0]
}]
})
});
https://jsfiddle.net/ngoclamnn/nu2fwzrn/
But you can see that it has a little bit "weird" at the 0 values, maybe it is a bug on Highchart?
Do you have another way to solve this?
Using this answer I was able to find a solution. Create yAxis categories as a variable and use the same function the answer uses to insert them, that is:
var categories = {0: '', 33.33333: 'Må øve mer', 66.66667: 'På god vei', 100: 'Kan'}
And then in the chart:
yAxis: {
labels: {
enabled: true,
formatter: function() {
return categories[this.value];
}
},
tickInterval: 1,
minPadding: 0,
maxPadding: 0,
startOnTick: true,
endOnTick: true,
...
}
Working example: https://jsfiddle.net/nu2fwzrn/73/
Make sure to upvote the original answer.
By default, the scale for the x-axis and y-axis are on the bottom & left of the chart, respectively, as you can see here: http://jsfiddle.net/z7eyv/60/
I want them adjacent to the plot lines (the x- and y-axis). Here's an illustration of what I'm hoping to achieve: imgur.com/a/tf53t
I know that I can use offset: to move the scales to a specific pixel location, but they no longer align to the plot lines if I change the maximum/minimum values on either axis.
I labeled where I think offset should go in the code below, but I'm not sure what to type after it.
Here's the specific part of the code in question:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: {
text: ''
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
}
},
xAxis: {
min: -20,
max: 14,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
offset: //???????????????????????????????????????
title: {
text: '',
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},
As I have mentioned in my comments, you can use 'crossing-specific-values' plugin, available in Highcharts plugin repository:
https://www.highcharts.com/plugin-registry/single/6/Crossing-Specific-Values
You should be able to use labels.y option for moving your labels up/down
http://api.highcharts.com/highcharts/yAxis.labels.y
You should also be able to disable 0 values from your labels using labels.formatter:
http://api.highcharts.com/highcharts/yAxis.labels.formatter
yAxis: {
min: -20,
max: 20,
crossing: 0,
labels: {
formatter: function() {
return this.value ? this.value : ''
}
},
tickInterval: 1,
endOnTick: false,
title: {
text: ''
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'
}]
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
}
},
xAxis: {
min: -20,
max: 14,
crossing: 0,
opposite: true,
visible: true,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
labels: {
y: 13,
formatter: function() {
return this.value ? this.value : ''
}
},
title: {
text: '',
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'
}]
},
Example:
http://jsfiddle.net/z7eyv/71/
I have a scenario where in i have to create markers/Circles in Spline chart.
I created spline chart using highcharts, the code is below for the chart.
and my output should be like below. and i have marked the expected circles the image:
$(function () {
var image;
var line,
label,
image,
clickX,
clickY;
var start = function (e) {
$(document).bind({
'mousemove.line': step,
'mouseup.line': stop
});
clickX = e.pageX - line.translateX;
//clickY = e.pageY - line.translateY; //uncomment if plotline should be also moved vertically
}
var step = function (e) {
line.translate(e.pageX - clickX, e.pageY - clickY)
if (image) {
image.translate(e.pageX - clickX, e.pageY - clickY)
}
if (label) {
label.translate(e.pageX - clickX, e.pageY - clickY)
}
}
var stop = function () {
$(document).unbind('.line');
}
$('#ao-salesoptimization-graph').highcharts({
chart: {
type: 'spline',
spacingBottom:40,
spacingTop: 5,
spacingLeft: 0,
spacingRight: 10,
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false,
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
gridLineColor: '#eeeeee',
gridLineWidth: 1,
type: 'datetime',
min: Date.UTC(2010, 0, 1),
max: Date.UTC(2020, 0, 1),
labels: {
enabled :false
},
plotLines: [{
color: '#004a80',
dashStyle: 'Dot',
value: Date.UTC(2014, 7, 10), // Value of where the line will appear
width: 5,// Width of the line
zIndex: "10",
label: {
text: '<span class="drag"></span>',
}
}],
tickWidth: 0
},
plotOptions: {
series: {
lineWidth: 4,
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: "#4b0081",
states: {
hover: {
enabled: true,
fillColor: "#0047ab",
lineColor: "#fff",
lineWidth: 3,
}
},
}
}
},
yAxis: {
min: 10000,
max: 100000,
gridLineColor: '#eeeeee',
gridLineWidth: 1,
title: {
text: 'Sales',
style: {
fontWeight: "bold",
fontSize: "14"
}
},
label: {
formatter: function () {
return (this.y / 1000) + "k"
}
},
tickWidth: 0,
},
series: salesoptimizationgraphhData()
}, function (chart) {
label = chart.xAxis[0].plotLinesAndBands[0].label;
image = chart.xAxis[0].plotLinesAndBands[0].image;
line = chart.xAxis[0].plotLinesAndBands[0].svgElem.attr({
stroke: '#004a80'
})
.css({
'cursor': 'pointer'
})
.translate(0, 0)
.on('mousedown', start);
image = chart.renderer.image('../../../Content/Img/ao-chart-scroller.png', 285, 300, 64, 24).attr({
zIndex: 100
}).translate(0, 0).addClass('image').on('mousedown', start).add();
});
});
How can i achieve this?
You could use spline and scatter series with Draggable Points plugin.
Example: http://jsfiddle.net/0moy3q71/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false
},
plotOptions: {
series: {
stickyTracking: false
},
scatter: {
cursor: 'move'
}
},
series: [{
data: [[3,200],[5,123]],
draggableY: true,
draggableX: true,
dragMinY: 0,
type: 'scatter'
}, {
data: [0, 71.5, 106.4, 129.2, 144.0, 176.0],
type: 'spline'
}]
});
Hopefully I understand your question correctly. I have created a spline chart. Focus on the August data where I explicitly define a standalone marker. Check this out .
Edited: I don't think it's achievable to move a pointer to a random place as each pointer must have values to both x and y axis. Don't think we can plot something that is floating around in Highcharts context. Not encouraging other HTML/javascript hacking around.
The best I can come out is this. Two series are created. Some points are hidden in the first series and only one big pointer available in second series.
I have two y-axis.
using primary y-axis I have created column chart but when I am trying to create line chart using secondary y-axis with negative percentage data values my line chart is going down from x-axis I don't want that so do anyone know about this please help me as soon as possible ?
$(function () {
$('#container').highcharts({
colors: [ '#24CBE5','#FF9655'],
chart: {
type: 'column'
},
title: {
text: 'combine chart'
},
plotOptions: {
series: {
pointPadding:0,
groupPadding:0.3,
borderWidth: 1,
//shadow: false
}
},
xAxis: {
gridLineWidth: 0,
minorGridLineWidth: 0,
categories: ['Oct 15', 'Nov 15', 'Dec 15', 'Jan 15', 'Feb 15','March 15'],
},
yAxis: [{ // Primary yAxis
min: 0,
max: 4,
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
formatter: function () {
return this.value + '$';
}
},
title: {
text: 'Million',
}
}, { // Secondary yAxis
tickInterval:5, //set ticks to 20
min: -30,
max: 10,
column :{
stacking:'percent'
},
title: {
text: '% Percantage',
},
labels: {
formatter: function () {
return this.value + '%';
}
},
opposite: true
}],
series: [
{
type: 'column',
name: 'AB',
data: [3, 3.5, 3.3, 3.6, 2.5,2]
}, {
type: 'column',
name: 'BC',
data: [3.3, 2, 3.3, 3.4, 2.9,3]
}, {
// USE THIS CODE TO GENERATE LINE CHART (I HAVE USED ONLY MILION AND CREATED LINE CHART BUT INSTEAD I WANT TO USE percentage )
type: 'line',
name: '% Percantage',
data: [0.5, 2, 0, 4, 3.7,2.6],
color: '#000000',
//border: 1,
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null // inherit from series
}
}]
});
});
You need to set alignTicks as false.
chart:{
alignTicks: false
}