I want to create something similar to this in Highcharts:
with plotsbands that are unique to each bar.
I've managed to do this by creating one chart for each bar
but that doesn't scale very well:
http://jsfiddle.net/dffmgv5o/
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
marginLeft: 130
},
exporting: { enabled: false },
title: {text: ''},
xAxis: {categories: ['One category']},
yAxis: {
labels: {
enabled: false
},
allowDecimals: false,
min: 0,
max: 100,
title: {
enabled: false
},
plotBands: [{
color: 'green', // Color value
from: 0, // Start of the plot band
to: 35 // End of the plot band
}, {
color: 'orange', // Color value
from: 35, // Start of the plot band
to: 60 // End of the plot band
}, {
color: 'red', // Color value
from: 60, // Start of the plot band
to: 100 // End of the plot band
}]
},
credits:{enabled:false},
legend: {enabled: false},
series: [{
name: 'Value',
data: [49],
color: '#444444',
dataLabels: {
enabled: true
},
pointWidth: 15
}]
});
$('#container2').highcharts({
chart: {
type: 'bar',
marginLeft: 130
},
exporting: { enabled: false },
title: {text: ''},
xAxis: {categories: ['Another category']},
yAxis: {
labels: {
enabled: false
},
allowDecimals: false,
min: 0,
max: 100,
title: {
enabled: false
},
plotBands: [{
color: 'red', // Color value
from: 0, // Start of the plot band
to: 35 // End of the plot band
}, {
color: 'orange', // Color value
from: 35, // Start of the plot band
to: 70 // End of the plot band
}, {
color: 'green', // Color value
from: 70, // Start of the plot band
to: 100 // End of the plot band
}]
},
credits:{enabled:false},
legend: {enabled: false},
series: [{
name: 'Value',
data: [65],
color: '#444444',
dataLabels: {
enabled: true
},
pointWidth: 15
}]
});
$('#container3').highcharts({
chart: {type: 'bar',
marginLeft: 130},
exporting: { enabled: false },
title: {text: ''},
yAxis: {
allowDecimals: false,
min: 0,
max: 100,
title: {
enabled: false
}
},
credits:{enabled:false},
legend: {enabled: false},
series: [{
dataLabels: {
enabled: true
}
}]
});
});
How can I do this by creating only one chart?
You can achieve that with three additional series (one series per color) with disabled grouping and correctly set bar width.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
xAxis: {
categories: ['One category', 'Another category']
},
yAxis: {
min: 0,
max: 100
},
plotOptions: {
series: {
grouping: false,
pointWidth: 30,
borderWidth: 0,
enableMouseTracking: false,
}
},
legend: {
enabled: false
},
series: [{
data: [100, 100],
linkedTo: 'main',
colorIndex: 5
}, {
data: [65, 55],
linkedTo: 'main',
colorIndex: 2
},{
data: [35, 15],
linkedTo: 'main',
colorIndex: 3
}, {
id: 'main',
data: [49, 65],
pointWidth: 15,
colorIndex: 0,
enableMouseTracking: true
}]
})
Live example and output
http://jsfiddle.net/crz1bs4m/
Related
I have a waterfall chart working, but I need that penultimate column start at zero.
I think I need to create a dummy point that hide and set Axis.min on the second point y position, but I can't put this working.
chart: {
type: 'waterfall'
},
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
//colors: ['#DADBDF', '#ED4D5F','#ED4D5F','#ED4D5F','#ED4D5F','#ED4D5F','#D7EAFD','#D7EAFD','#D7EAFD' ],
xAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
categories: [],
},
yAxis: {
lineColor: '#FFFFFF',
lineWidth: 0,
gridLineColor: '#DADBDF',
plotBands: [{
color: '#000000',
from: 0,
to: 0
}],
title: {
text: ''
},
},
legend: {
enabled: false
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
color: '#000000'
},
colorByPoint: true,
pointWidth: 150
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
},
turboThreshold: 0,
label: {
enabled: false
}
}
},
series: [{
data: [],
showInLegend: false,
}],
You can add another waterfall series with defined x values:
Highcharts.chart('container', {
chart: {
type: 'waterfall'
},
...,
plotOptions: {
series: {
grouping: false
}
},
series: [{
data: [...]
}, {
data: [{
y: 569000,
x: 5
}, {
y: 1569000,
x: 6
}]
}]
});
Live example: https://jsfiddle.net/BlackLabel/qc07y5kf/
API Reference: https://api.highcharts.com/highcharts/series.waterfall.data
I have one Highchart which is showing a Standard Deviation curve (Bell curve). I would like to plot a x axis vertical line when x=0.(see my current graph).
When I include the code to include the line the chart disappear, so I believe something I need to change, obviously :-).
Just as information the chart works perfectly without the "plotLines:" inside xAxis.
Could you help me with this?
See my Script
<script>
var data = <?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>;
var pointsInInterval = 5;
Highcharts.chart('container', {
chart: {
margin: [50, 0, 50, 50],
events: {
load: function () {
Highcharts.each(this.series[0].data, function (point, i) {
var labels = ['4σ', '3σ', '2σ', 'σ', 'μ', 'σ', '2σ', '3σ', '4σ'];
if (i % pointsInInterval === 0) {
point.update({
color: 'red',
dataLabels: {
enabled: true,
format: labels[Math.floor(i / pointsInInterval)],
overflow: 'none',
crop: false,
y: -2,
style: {
fontSize: '13px'
}
}
});
}
});
}
}
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 0
}]
],
yAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true
}],
series: [{
name: 'Bell curve asd',
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
pointsInInterval: pointsInInterval,
intervals: 4,
baseSeries: 1,
zIndex: -1,
marker: {
enabled: true
}
}, {
name: 'Data',
type: 'scatter',
data: data,
visible: false,
marker: {
radius: 1.5
}
}],
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}
});
</script>
Plot lines should be added as a property of an axis object:
xAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true,
plotLines: [{
color: '#FF0000',
width: 2,
value: 0
}]
}
]
Live demo: http://jsfiddle.net/BlackLabel/4xcno5v9/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotLines
Base chart:
type: 'area',
https://jsfiddle.net/q3x9psdz/19/
But when cross value is to big for curent chart - yAxis is expanding:
plotOptions: {
series: {
threshold: 20,
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 50,
crosshair: true,
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
},
{
value: 20,
color: 'coral',
dashStyle: 'shortdash',
width: 2,
}
]}
https://jsfiddle.net/q3x9psdz/14/
Workaround is to use spline or line:
series: [{
type: 'spline',
name: 'Chart',
data: [[1523195126000,1],[1523195426000,3],[1523195726000,1],[1523196026000,2],[1523196326000,6],[1523196626000,5],[1523196926000,2],[1523197226000,3],[1523197526000,1]],
negativeColor: true,
color: '#FF4040',
shadow: true
}]
https://jsfiddle.net/q3x9psdz/23/
But on cros no area color:
plotOptions: {
series: {
threshold: 2.5,
}
},
https://jsfiddle.net/q3x9psdz/21/
Any solution to have color fille area and not expanding yAxis?
Set series.softThreshold to true.
plotOptions: {
series: {
threshold: 20,
softThreshold: true
}
},
live example: https://jsfiddle.net/j58bvw36/
I would like to have something similar to the image below, but the columns representing the classes all stack together now. How do I separate them and allow them to load dynamically as well?
Also I need a legend that says green is band 1, yellow is band 2, orange is band 3 and red is band 4, how do i do that as well? My code is in the JS Fiddle page. I am not allowed to use jQuery, need to use pure JavaScript.
var options = {
chart: {
renderTo : 'container',
type: 'column'
},
title: {
text: 'Topic & Subtopic Mastery'
},
subtitle: {
text: 'Average Level-Stream Mastery vs Average Class Mastery'
},
xAxis: {
categories: topics
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Mastery'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
shadow: true
},
tooltip: {
shared: true,
valueSuffix: ' %'
},
plotOptions: {
column: {
grouping: false,
shadow: false
}
},
series: resultsData
};
http://jsfiddle.net/kscwx139/2/
I came up with a solution you are looking for with specifying x and y axis data for level and giving appropriate width to the point.
$(function() {
var chart;
$(document).ready(function() {
var i = 0;
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
if (i == 0) {
i++;
return Highcharts.Color(color)
.setOpacity(1)
.get('rgba');
} else {
i++;
return Highcharts.Color(color)
.setOpacity(0.5)
.get('rgba');
}
});
var colors = Highcharts.getOptions().colors;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
borderColor: null
},
title: {
text: 'Mailboxes over Quota'
},
subtitle: {
text: 'Mailbox Size in MB'
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: ["Overall Topic", "Topic 1", "Topic 2"],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Total',
align: 'high'
},
allowDecimals: false,
},
tooltip: {
formatter: function() {
return '' +
this.series.name + ': ' + Highcharts.numberFormat(this.y, 0, '.', ',');
}
},
legend: {
enabled: true
},
credits: {
enabled: false
},
series: [{
name: 'Level',
color: colors[0],
data: [{
y: 86,
x: 0.25
}, {
y: 80,
x: 1.25
}, {
y: 95,
x: 2.25
}],
pointWidth: 80
}, {
name: '4A',
data: [90, 88, 97]
}, {
name: '4B',
data: [95, 78, 92]
}, {
name: '4C',
data: [80, 69, 84]
}]
});
});
});
To show in label inside your column you can use below code.
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function() {
return this.series.name;
},
y: 25,
}
}
}
You can see it in action at this JSFIddle
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.