I am using highcharts for the first time, and I am trying to figure out how to set the Y axis points static.
I have used min=0 and max=140 , and the points on y axis come up as 0,25,50,75,100,125 and 150. Wherein I want it as 0,20,40,60,80,100,140.
Can someone let me know how could I achieve this.
Below is the highchart optins :
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Div1',
width: 600,
height: 400
},
yAxis:{
min: 0, max: 140,
lineColor: '#FF0000',
lineWidth: 1,
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}]
},
series: [{
name: 'Value',
data: YaxisValuesArray
}]
});
});
You can set the tickInterval (http://api.highcharts.com/highstock#yAxis.tickInterval) on the axis
http://jsfiddle.net/blaird/KdHME/
$(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Div1',
width: 600,
height: 400
},
credits: {
enabled: false
},
title: {
text: 'Productivity Report',
x: -20 //center
},
xAxis: {
lineColor: '#FF0000',
categories: [1, 2, 3]
},
yAxis: {
min: 0,
max: 140,
tickInterval: 20,
lineColor: '#FF0000',
lineWidth: 1,
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Value',
data: [
[1, 10],
[2, 20],
[3, 30]
]
}]
});
});
To do this using HighChart in a StockChart mode, I just need to set the property tickPixelInterval.
yAxis: {
...
tickPixelInterval: 35
...
}
Related
A smoother line is needed (the line should rise smoothly and evenly), but the values should not change. Is it possible to build a more straight line without changing the values?
Screen with explanations: http://prntscr.com/qudf96
And my code:
<script>
function reDrawCalc(gdata, gcurr, nums = 2) {
Highcharts.chart('container', {
chart: {
height: 400,
type: 'area',
margin: [20, 0, 20, 0]
},
title: {
text: null
},
subtitle: {
text: null
},
exporting: {
enabled: false
},
xAxis: {
gridLineWidth: 1,
categories: ['One', 'Two', 'Three', 'Four', 'Five']
},
yAxis: {
gridLineWidth: 0,
},
tooltip: {
enabled: false,
crosshairs: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true,
inside: false,
style: {
fontFamily: 'Rubik, sans-serif',
textTransform: 'uppercase',
fontSize: 'none',
fontWeight: 'normal',
textShadow: 'none'
},
formatter: function() {
return '<div class="chitem-time">'+ this.x+'</div>'
+'<div class="chitem-val">'+ Highcharts.numberFormat(this.y,nums)+'<sup>'+gcurr+'</sup></div>';
}
}
}
},
series: [{
type: 'areaspline',
data: gdata,
lineWidth: 5,
color: '#f0c997',
fillColor:'transparent'
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 350,
type: 'area',
margin: [20, 0, 20, 0]
},
series: [{
type: 'areaspline',
data: gdata,
lineWidth: 3,
color: '#f0c997',
fillColor:'transparent'
}],
}
}]
}
});
}
</script>
Is it possible to do it? And how to modify my code for it?
Thank you very much in advance!
As I mentioned in the comment current line shape is at it is because of the points positions on the chart. If you don't need to keep points actual positions the solution which you can use is to use the dummy data for the points and use the correct one in the dataLabels. See:
Demo: https://jsfiddle.net/BlackLabel/fshx3n50/
data: [{
y: 5,
z: 0.20
}, {
y: 10,
z: 1.40
}, {
y: 18,
z: 6.20
}, {
y: 30,
z: 18.00
}, {
y: 50,
z: 73.00
}],
I also changed the formatter function to display the z value in dataLabel:
formatter: function() {
return '<div class="chitem-time">' + this.x + '</div>' +
'<div class="chitem-val">' + Highcharts.numberFormat(this.point.z) + '<sup>REM</sup></div>';
}
I'm trying to create a Spider graph that has the y-axes labels offset with extended gridlines.
Is this possible to achieve with just one graph, or do I have to create two separate graphs and overlay them? I've tried ticklines, gridlines, and they all get stuck in the polar coordinates.
Here's my attempt at trying to accomplish this:
http://jsfiddle.net/6d6jrfhs/3/
{
chart: {
polar: true,
type: 'line'
},
title: {
text: "# of Impacts",
x: -80
},
pane: {
size: '80%',
startAngle: 0,
},
xAxis: {
categories: ['Back', 'Left', 'Front', 'Top',
'Right'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0,
offset: 0,
labels: {
align: 'left',
x: -100,
y: 0
},
tickLength: 500,
plotLines: [{
color: 'red', // Color value
dashStyle: 'longdashdot', // Style of the plot line. Default to solid
value: 40000, // Value of where the line will appear
width: 1 // Width of the line
}]
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
type:'area',
name: 'Low Impact',
data: [43000, 19000, 60000, 35000, 17000],
pointPlacement: 'off'
}, {
type:'area',
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000],
pointPlacement: 'off'
}]
}
This demo shows how to find labels (SVG elements) in the chart object and create additional gridline using SVG Renderer: http://jsfiddle.net/kkulig/eg7p3r48/
events: {
render: function() {
var yAxis = this.yAxis[0],
renderer = this.renderer,
label = yAxis.ticks[0].label;
renderer.path(['M', label.xy.x, label.xy.y, 'l', label.xy.x - xOffset - 30, 0]).attr({
stroke: 'black',
'stroke-width': 1
}).add();
}
}
API reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
I'm making a chart which has two x-axis and two y-axis on it.
It's a line chart with smooth curve. It should have lines from two series as dash or longdash but when I use dashStyle it throws error.
I have seen many examples where it's working in jsFidler or Plunker.
Below is my code. I'm using Angular 4 with typescript.enter image description here
var ctx = document.getElementById("PumpCurveEvolutionChart") as HTMLElement;
var chart = Highcharts.chart(ctx, {
chart:{
height: 350,
width: 700,
marginTop: 30,
},
title: { text: 'Flow (l/S)', verticalAlign: 'bottom'}
,
xAxis: [{
categories: this.getPumpCurveEvolution.OEMFlow,
},
{
categories: this.getPumpCurveEvolution.CurrentFlow,
opposite: true,
labels: { enabled: false },
minorTickLength: 0,
tickLength: 0
}],
yAxis:[{
min: 0,
max: 100,
labels: { enabled: true},
title: { text: 'Head (m)'},
},{
min: 0,
max: 110,
opposite: true,
labels: { enabled: true},
title: { text: 'Efficiency (%)'}
}],
plotOptions: {
series: {marker: { enabled: false}, lineWidth: 2},
//line: { dashStyle: 'dash'}
},
legend: {enabled: false,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -30,
y: 100,
borderWidth: 0
},
series: [{
xAxis:0,
yAxis:0,
data: this.getPumpCurveEvolution.OEMHead,
},
{
xAxis:0,
yAxis:1,
data: this.getPumpCurveEvolution.OEMHydrEfficiency,
},
{
xAxis:1,
yAxis:0,
data: this.getPumpCurveEvolution.CurrentHead,
},
{
xAxis:1,
yAxis:1,
data: this.getPumpCurveEvolution.CurrentHydrHead,
}]
});
You can use dashStyle by extending HighCharts.IndividualSeriesOptions:
export interface IHighChartCustomSeries extends Highcharts.IndividualSeriesOptions {
dashStyle?: string
}
I want to fill area color above the spline in area spline chart.
I have tried to set negative fill color but no result.
Can anyone let me know how to fill area color above the spline rather then below?
Any help will be appreciated.
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Average fruit consumption during one week'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
],
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)',
}]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12],
negativeFillColor: '#000000'
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4],
negativeFillColor: '#000000'
}]
});
})
;
Thanks,
M
Well, threshold should work. Just you need to set
endOnTick: false
maxPadding: 0
threshold: max_value_in_data
See: http://jsfiddle.net/3bQne/1076/
Code:
var data = [3, 4, 3, 5, 4, 10, 12];
Array.prototype.max = function() {
return Math.max.apply(null, this);
}
$('#container').highcharts({
chart: {
type: 'areaspline'
},
yAxis: {
endOnTick: false,
maxPadding: 0
},
plotOptions: {
areaspline: {
threshold: data.max(),
}
},
series: [{
data: data,
negativeFillColor: 'rgba(255, 0, 0, 0.5)'
}]
});
I have a problem with a highcharts graph, regarding overlapping of multiple axes.
There are 2 types of series, one type column and one type line. I want the line type to be always above the others and never intersect them.
You may see my problem here:
http://jsfiddle.net/99tC7/
Anticipated thank you for any help provided.
$('#container').highcharts({
title: {
text: 'Title',
x: -20 //center
},
xAxis: {
categories: [ "5.11.13", "6.11.13", "7.11.13", "8.11.13", "9.11.13"],
labels: {
rotation: 270
}
},
yAxis: [{
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title:{
text: "Number 1"
},
},
{
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title:{
text: "Number 2"
},
opposite: true,
max:50,
minPadding:5,
}],
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y +'%';
}
}
},
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.y;
}
}
}
},
series: [{
name: 'L1',
type: 'column',
color: '#FF0000',
yAxis: 0,
data: [1, 5, 9, 10, 12]
},
{
name: 'L2',
type: 'column',
color: '#00FF00',
yAxis: 0,
data: [16, 16, 106, 12, 11]
},
{
name: 'L3',
yAxis: 1,
data: [38, 24, 37, 29, 37]
}
]
});
You can try to set correct min/max values in both yAxis like here http://jsfiddle.net/99tC7/1/