Can we give plot coordinates as a combination of string and integer without using x axis property categories?
For eg
series: [{
name:'Before Campaign',
data: [['Jan',20],['Feb',30]]
}]
I have the example at http://jsfiddle.net/yxeLyao9/3/
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 400px; height: 400px"></div>
$(function () {
$('#container').highcharts({
chart: {
marginTop: 50,
marginBottom: 50,
marginLeft: 50,
marginRight: 50,
type: 'column'
},
title:{
text:'Revenue'
},
/*xAxis: {
//categories: ['Jan','Feb','Mar','Apr','','May','Jun','Jul','Aug']
},*/
series: [{
name:'Before Campaign',
data: [['Jan',20],['Feb',30]]
}]
});
});
If I understand you correctly, you don't want to explicitly specify the categories? You want the categories on the xaxis from the data?
Just specify that the xaxis is of type category and highcharts will take them from the data:
xAxis: {
type: 'category'
}
Updated fiddle.
Related
good morning guys,
I need your help for a problem that I can not solve.
I need to highlight the intersections between a simple data series and the related moving average.
The data of the moving average are automatically generated by HighStock and are not calculated by me (otherwise I would have almost solved the problem!).
If it is not possible to graphically highlight with different colors every time the series is above or below the moving average
I would like to calculate the difference between the two series (in this way I could draw a single line around the zero value with negative red values and values green positive for example).
After numerous researches I have not yet solved my problem. I must say that the documentation of HighChart / HighStock is very complete but it is mainly for professionals.
Thanks for your help!
This is what I need (look at the picture)
$('#container').highcharts('StockChart', {
title: { text: 'Relative Strenght' },
navigator: { enabled: false },
series: [
{
id: 'forza-rel',
type: 'spline',
name: 'Rel. Str.',
data: forza_relativa,
},
{
name: 'M.A. 5',
type: 'sma',
linkedTo: 'forza-rel',
color:'#FF0000',
dashStyle: 'line',
marker: { enabled: false },
params: { period: 5 }
}
]
});
I need to highlight the intersections between a simple data series and
the related moving average.
It can be done, however, it requires a lot of custom code and it's a bit tricky.
I would like to calculate the difference between the two series
This can be done easily. SMA is just another series, so you have to loop through SMA series data and make a difference between its data and a basic series data. Than use series.setData() method to update the third series with calculated values (areasplie for example).
HTML:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/indicators/indicators.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
JS:
Highcharts.stockChart('container', {
chart: {
height: 500,
events: {
load: function() {
var chart = this,
series = chart.series,
data = [],
offset,
diff,
i;
offset = series[0].xData.length - series[1].xData.length;
for (i = 0; i < series[1].xData.length; i++) {
diff = series[0].yData[i + offset] - series[1].yData[i];
data.push({
x: series[1].xData[i],
y: diff
});
}
chart.series[2].setData(data);
}
}
},
rangeSelector: {
selected: 0
},
title: {
text: 'AAPL Stock Price'
},
legend: {
enabled: true
},
plotOptions: {
series: {
showInLegend: true
}
},
yAxis: [{
height: '60%',
top: '0%',
id: '0'
}, {
height: '36%',
top: '62%',
id: '1'
}],
series: [{
type: 'spline',
id: 'aapl',
name: 'AAPL Stock Price',
data: data,
yAxis: '0'
}, {
type: 'sma',
linkedTo: 'aapl',
marker: {
enabled: false
},
yAxis: '0'
}, {
type: 'areaspline',
yAxis: '1',
color: 'green',
negativeColor: 'red',
data: []
}]
});
Demo:
https://jsfiddle.net/wchmiel/863n241h/3/
I'd like to remove the empty space at the left of the chart.
Have found no solution so far.
OK so i want all the columns to be placed on the right side of the ticks as in the fiddle, and remove the empty space between the y axis and the first tick.
Thanks in advance
$(function() {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {},
yAxis: [{
min: 0,
}],
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: 0.25
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: [140, 90, 40],
pointPadding: 0.3,
pointPlacement: 0.10
}]
});
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I have a bar chart which has dynamic columns in it.
What i want is that except the last column, all the columns should be of grey color. And the last column should be of green.
Can anyone help me out in this?
You can give color to last column in this way
series: [{
name: 'Test',
color:'grey',
data: [50, 30, 40, 70, {y: 34, color: '#66ff33'}]
}]
Fiddle link
So if the data array is dynamic then for the last value of array you have to make last element as {y: 34, color: '#66ff33'} of the array.
You could use zones.
Demo: http://jsfiddle.net/udL2ads2/6/
$(function() {
var histSuccess = [100, 99, 100, 98, 98, 99.9, 97.5, 100, 95, 90];
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Column chart with last column different color'
},
yAxis: {
min: 0,
title: {
text: 'Total'
}
},
series: [{
name: 'Test',
color: 'grey',
data: histSuccess,
zoneAxis: 'x',
zones: [{
value: histSuccess.length - 1.5,
color: 'grey'
},{
color: '#66ff33'
}]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
For some reason, Highcharts is formatting my text categories as dates.
Background Info
I am getting my data from a Google Spreadsheet. The labels should say Grade 12, Grade 11, etc. I know I can overwrite the xAxis labels with the categories function, but I want I sustainable solution so that my end users can change the labels as they wish.
CodePen
$(function() {
Highcharts.setOptions({
chart: {
defaultSeriesType: 'bar',
backgroundColor: '#fff',
shadow: false
}
});
$('#ms-highschool').highcharts({
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 1,
startRow: 0,
googleSpreadsheetWorksheet: 5
},
title: {
text: 'Charter School Makret Share for High School Grades, SY 2014-15'
},
yAxis: {
min: 0,
max: 40,
tickInterval: 10,
title: {
text: 'PCS Share'
}
},
xAxis: {
labels: {
enabled: true,
}
}
});
});
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script>
</script>
</head>
<body>
<div id="ms-highschool"></div>
</body>
You can specify type of x axis explicitly to have the problem solved.
xAxis: {
labels: {
enabled: true,
},
type: "category"
}
I am generating my x-axis and y-axis data dynamically and displaying highcharts, but the chart becomes messy when the x-axis range is high with small intervals.
How do I make highcharts to make normal horizontally scrollable graph?
Here is what I am using right now:
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
//CODE FOR HIGHCHARTS JS
function makeChart() {
$('#container').highcharts({
chart: {
type: 'line',
marginRight: 130,
marginBottom: 100
},
title: {
text: 'Banana',
x: -20 //center
},
subtitle: {
text: 'Source: banana.com',
x: -20
},
xAxis: {
categories: xlist
},
yAxis: {
title: {
text: 'No. of C'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: 'C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: $("#repoSelector option:selected").text(),
data: ylist
}]
});
}
Two ways to achieve a scroll bar.
Option 1
You will need to use highstock.js and instead of rendering a stock chart, you have to render a highchart.
Then enable the scroll bar
scrollbar: {
enabled: true
}
Check the API for scroll bar and related operations here.
Here I have fiddled an example.
Option 2
Try setting min & max attributes to the x-axis.
xAxis: {
categories: [...],
min: 0,
max:9
}
Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories.
find the fiddled example here.
To enable scrollbar in x-axis, try this
xAxis: {
categories: xlist,
min: 0,
max: 4,
scrollbar: {
enabled: true
},
},
Check the jfiddle here: https://jsfiddle.net/BhavyaAprajita/zja90wf2/1/
Also, make sure that you import the highstock library
src="https://code.highcharts.com/stock/highstock.js"
add this
const Highcharts = require('highcharts/highstock');
comment this if you have
// import Highcharts from 'highcharts';
change xAxis to like this
xAxis : {
categories: [],
min:0,
max:9,
scrollbar: {
enabled: true
}
}
Use
require('highcharts/highmaps') instead of require('highcharts') in imports<br>
#NgModule({<br>
...<br>
imports: [<br>
BrowserModule, <br>
ChartModule.forRoot( <br>
require('highcharts/highmaps')<br>
],<br>
})