I have a high chart code like this:
Highcharts.chart('linechart', {
chart: {
backgroundColor:'rgba(255, 255, 255, 0.8)',
borderRadius:5,
},
title: {
text: 'ROC Graph'
},
subtitle: {
text: 'Learning Evaluation'
},
xAxis: {
min: 0,
max: 1,
tickWidth:1,
tickPositions: [0.001, 0.01, 0.1,1]
},
yAxis: {
max: 1,
tickInterval:0.1,
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
pointStart: 0.30
}
},
});
And my javascript code:
for(j=0; j<data.roc_buffer[i]['xs'].length/10;j++){
x_plot = data.roc_buffer[i]['xs'][10*j]
y_plot = data.roc_buffer[i]['ys'][10*j]
plot_buffer[j] = {'x':x_plot, 'y':y_plot}
}
roc_chart.addSeries({
name: data.roc_buffer[i]['plotname'],
data: plot_buffer
});
It work out fine like this
However, I want the [0.001,0.01,0.1,1] all have same width so I need to adjust the xaxis to type logarithm. So I switch my code to:
xAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
Now the line disappear...
Also my data is something like
[{x:integer,y:integer},{x:integer,y:integer},{x:integer,y:integer},...]
What I understand.
Your xAxis and yAxis both value dynamically generated.
You can set data using setData method for yAxis and setCategories for xAxis.
$('#button').click(function () {
highchart.series[0].setData([1, 2, 4, 8, 16]);
highchart.xAxis[0].setCategories(['J', 'F', 'M', 'A', 'M']);});
or Check jsfiddle link
http://jsfiddle.net/ashish8833/w3o0jzL7/1/
Related
How can I enable only the left most Highcharts XAxis plot line on DateTime Line chart. I suppose there should be a default option to display XAxis line without needing to know the minimum/start value
My progress so far -> https://jsfiddle.net/Lpjb9wc7/
const chart = Highcharts.chart('container', {
credits: {
enabled: false,
},
title: null,
xAxis: {
title: 'Session',
type: 'datetime',
tickInterval: 3600 * 1000,
gridLineWidth: 1
},
yAxis: {
gridLineWidth: 0,
title: {
text: 'Temperature',
},
},
legend: {
enabled: false,
},
plotOptions: {
series: {
marker: {
enabled: false,
},
},
},
series: [
{
data: [
[1369206795000, 1],
[1369225421000, 3],
[1369230934000, 2],
],
},
],
});
You need to change the dafault value of the lineWidth property.
yAxis: {
lineWidth: 1,
...
}
Live demo: https://jsfiddle.net/BlackLabel/49078gLx/
API Reference: https://api.highcharts.com/highcharts/yAxis.lineWidth
Can someone please take a look at my jsFiddle example and let me know why the colors on the heatmap chart don’t appear to scale with the values? There is some significant variation that I would expect to propagate into the chart.
Also, how can I adjust the tooltip so that the values for x,y are formatted in the same way as the axis values?
https://jsfiddle.net/samwhite/uadrecjg/
var data1 = Papa.parse(document.getElementById('data1').innerHTML);
var data2 = Papa.parse(document.getElementById('data2').innerHTML);
function convertDataFromCsv(data) {
var convData = [];
data.forEach(function(elem) {
convData.push({
x: parseFloat(elem[0]),
y: parseFloat(elem[1]),
z: parseInt(elem[2])
});
});
return convData;
}
Highcharts.chart('heatmap_container', {
chart: {
type: 'heatmap'
},
xAxis: {
labels: {
formatter: function() {
let seconds = this.value * 5;
let t = new Date(1900, 1, 1, 9, 30, 0);
t.setSeconds(t.getSeconds() + this.value * 5);
return `${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`
}
},
tickInterval: 2
},
yAxis: {
labels: {
formatter: function() {
return `${this.value/100}`;
}
}
},
legend: {
align: 'right',
margin: 0,
verticalAlign: 'middle',
symbolHeight: 300
},
colorAxis: [{
type: 'logarithmic',
reversed: false,
layout: 'vertical',
maxColor: '#d52120',
minColor: '#ffffff',
min: 1,
max: 100000,
}, {
type: 'logarithmic',
reversed: false,
layout: 'vertical',
maxColor: '#1d843d',
minColor: '#ffffff',
min: 1,
max: 100000,
}],
series: [{
nullColor: '#EFEFEF',
color:'#d52120',
data: convertDataFromCsv(data1.data),
turboThreshold: Number.MAX_VALUE
}, {
nullColor: '#EFEFEF',
color:'#1d843d',
data: convertDataFromCsv(data2.data),
turboThreshold: Number.MAX_VALUE
}, {
colorAxis: 1
}]
});
Current colors:
For example, I see the same red and green colors.
Desired colors:
The color green and red should go from light to dark to scale with the values as seen below
UPDATE:
This is how the chart looks like when importing the data from CSV files using the z value:
https://jsfiddle.net/samwhite/4w8r7chn/1/
Use value instead of z property:
function convertDataFromCsv(data) {
var convData = [];
data.forEach(function(elem) {
convData.push({
x: parseFloat(elem[0]),
y: parseFloat(elem[1]),
value: parseInt(elem[2])
});
});
return convData;
}
Live demo: https://jsfiddle.net/BlackLabel/rcaetjbw/
API Reference: https://api.highcharts.com/highcharts/series.heatmap.data
I want to show my categories on the top of each bar chart. like the image.
for this i set bar-chart option as below without any xAxis categories label.
options: {
title: null,
chart: {
type: 'bar'
},
colors: ['#9696b2', '#ff058d'],
xAxis: {
categories: ['Tokyo', 'Fukuoka', 'Hiroshima', 'Osaka', 'Nagoya'],
visible: false,
},
yAxis: {
visible: false,
},
tooltip: {
valueSuffix: ' '
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Compliant',
data: [1300, 1121, 1700, 1121, 700]
}, {
name: 'Non-Compliant',
data: [60, 30, 50, 20, 0]
}]
}
how can i make this one with stacked horizontal bars?
You can align labels to left and position them by x and y properties:
xAxis: {
...,
lineWidth: 0,
labels: {
align: 'left',
x: 0,
y: -24
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4767/
API Reference: https://api.highcharts.com/gantt/xAxis.labels
I got common dataset for both line series and bar graph . In other words dataset consists both line series dataset and bar graph dataset. Now I want to plot line series graph on separate x-axis and bar graph on separate x-axis. And want to control them both from same frame. Like both tooltip for both should come in same popup, from same section I can show and hide them. Attached my screenshot , currently they are sharing same x-axis. I want to separate them. Here is my piece of code.
for(j=0; j<timelinejson.length; j++){
seriesOptions[j] = {
//name: selectedMarkers[i],
name: timelinejson[j].marker_desc,
data: mData,
marker : {
enabled : true,
radius : 3
},
type : 'spline',
tooltip : {
valueDecimals : 2
}
};
}
seriesOptions[10] = {
name: 'Speed',
data: [[1372636800000, 0.16], [1375315200000, 0.36], [1377993600000, 0.4], [1380585600000, 0.68], [1383264000000, 0.6], [1385856000000, 0.64], [1388534400000, 0.68], [1391212800000, 0.69], [1393632000000, 0.71], [1396310400000, 0.73], [1398902400000, 0.74], [1401580800000, 0.75], [1404172800000, 0.76], [1406851200000, 0.17], [1409529600000, 0.67], [1412121600000, 0.18], [1414800000000, 0.58], [1417392000000, 0.28], [1420070400000, 0.58], [1422748800000, 0.49], [1425168000000, 0.39], [1427846400000, 0.29], [1430438400000, 0.59], [1433116800000, 0.19]],
type: 'column',
valueDecimals: 1
};
drawTrend(seriesOptions,temp)
function drawTrend(marker_array_main,temp) {
$('#trendChart'+temp).highcharts('StockChart', {
chart: {
height: 400
//width: 500
},
rangeSelector: {
selected: 4
},
yAxis: {
/*labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},*/
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',
valueDecimals: 2
},
series: marker_array_main
});
}
I think that you can use multiple yAxis in case of your chart. You can add as many yAxes as you want and you can connect your series with this axes using yAxis:x parameter in your Series object.
x value is an index of specific axis in yAxis array.
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
Here you can find simple example of this kind of chart from Highcharts demos:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
I have a Highchart in my web application. In the browser it displays normally which is as follows:
But when I export the chart it flips the axis and I end up with the following image:
Following are the options I am using for my Highchart.
var options = ({
chart: {
renderTo: 'chartDiv'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7200 * 10000,
allowDecimals:false,
labels: {
format: '{value}',
rotation: 30,
align: 'left',
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'No. of rings'
},
min: 0
},
{ // Secondary yAxis
gridLineWidth: 0,
min: 0,
title: {
text: 'Accumulative Rings',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} Ring',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
}
],
tooltip: {
shared: true
},
legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
plotOptions: {
spline: {
marker: {
enabled: false
},
}
}
});
I have three series in my chart, the bar chart can have 0 values.
The data is coming from an ajax service, which I put in an array and then add to chart as follows:
chart.addSeries({
type: 'bar',
name: 'Rings per day ',
data: barData,
pointInterval: mainInterval
});
chart.addSeries({
type: 'spline',
name: 'Accumilative rings ',
data: spline1Data,
yAxis: 1,
});
chart.addSeries({
type: 'spline',
name: 'Planned Progress ',
data: spline2Data,
yAxis: 1,
color: "#FF0000"
});
What's wrong with my chart?
bar series is the key part. bar series forces chart to be rendered flipped. In your case use column. It displays differently on your browser because, most probably, you have an old version of Highcharts.