I want to create a chart with a bar inside of a stacked bar as seen on the image bellow.
I managed to put the column inside of the column but, I can't make it work for the bar. How can I put the bar inside of the stacked bar?
My code - JsFiddle
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
},
title: {
text: 'Test %'
},
xAxis: {
categories: ['2014', '2013', '2012', '2011']
},
yAxis: {
opposite: true,
labels: {
format: '{value}%',
},
},
plotOptions: {
series: {
stacking: 'normal'
},
column: {
stacking: 'percent'
}
},
legend: {
enabled: false
},
series: [{
name: 'red',
type: 'bar',
data: [70, 70, 70, 70],
color: 'rgba(253, 155, 155, 1)',
pointPadding: 0.1,
pointPlacement: -0.2,
stack: 'bar'
}, {
name: 'yellow',
type: 'bar',
data: [5, 5, 5, 5],
color: 'rgba(255, 255, 153, 1)',
pointPadding: 0.1,
pointPlacement: -0.2,
stack: 'bar'
}, {
name: 'green',
type: 'bar',
data: [25, 25, 25, 25],
color: 'rgba(204, 255, 153, 1)',
pointPadding: 0.1,
pointPlacement: -0.2,
stack: 'bar'
}, {
name: 'Value',
type: 'bar',
data: [35, 30, 25, 20],
color: 'rgba(126,86,134,.9)',
pointPadding: 0.35,
pointPlacement: -0.2,
dataLabels: {
enabled: true,
format: '{y}%'
},
}]
});
Any help appreciated.
You could set grouping to false, so all stacks will be placed on top of each other - overlap each other.
Example: http://jsfiddle.net/zs6juetp/2/
plotOptions: {
series: {
grouping: false
...
API reference: plotOptions.bar.grouping
It looks like you're making a bullet graph.
I have examples of this here:
http://jsfiddle.net/jlbriggs/UGs2E/17/
.
plotOptions:{
bar:{
grouping: false,
shadow:false,
borderWidth:0,
pointPadding:.25,
groupPadding:0
},
scatter:{
marker:{
symbol:'line',
lineWidth:3,
radius:9,
lineColor:'#333'
}
}
}
Also uses a function to extend the marker object for the target line, on a scatter series:
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};
Related
I am trying to create a bar chart with the columns aligned to the left using the PrimeNg p-chart. I started with the stacked graph on http://primefaces.org/primeng/chart/bar.
This is my current graph:
Desired look:
I have tried using categoryPercentage: 0.99, and barPercentage: 1.0 from How to align ChartJS bars to the left?. These didn't create my desired look as they expanded the column to the full width. I want to have smaller width columns and shift them over to the left. Are there any properties that can be used to achieve this effect? Are there any alternatives to ChartJS properties?
this.stackedData =
[{
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '200',
backgroundColor: '#003D79',
data: [
50,
55,
78,
48,
90,
76,
42
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '400',
backgroundColor: '#AC0000',
data: [
21,
4,
24,
75,
37,
65,
34
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '401',
backgroundColor: '#E80000',
data: [
41,
0,
24,
74,
23,
21,
32
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: '402',
backgroundColor: '#5C0000',
data: [
41,
52,
0,
74,
23,
21,
32
]
}, {
type: 'bar',
categoryPercentage: 0.25,
borderRadius: 3,
label: 'Other',
backgroundColor: '#D5D5D5 ',
data: [
]
}];
this.stackedOptions = {
plugins: {
tooltips: {
mode: 'index',
intersect: false
},
legend: {
position: 'bottom',
align: 'end',
labels: {
usePointStyle: 'circle',
}
},
},
scales: {
x: {
stacked: true,
grid: {
display: false
},
ticks: {
maxRotation: -45,
minRotation: -45,
padding: 30,
}
},
y: {
stacked: true,
grid: {
drawBorder: false,
lineWidth: 0.5,
}
}
}
};
the version of Chart JS is 3.7.0
I am looking for a way to make my chart's points look from this:
to something like this:
I found out that there is an option in this library where you can set the points to a certain shape. e.x: pointStyle: 'rectRot' will make the points appearance look like this:
Is there an option or a way to achieve what Im looking for? (Check the second picture).
Thanks in advance!
My chart's javascript:
const data = {
datasets: [
{
backgroundColor: 'black',
borderColor: '#2d84b4',
borderWidth: 2,
data: [
{ x: 'Dec 27', y: 0.204 },
{ x: '01:00', y: 0.234 },
{ x: '02:00', y: 0.274 },
{ x: '03:00', y: 0.234 },
{ x: '04:00', y: 0.304 },
{ x: 'Dec 28', y: 0.506 },
],
fill: false,
pointBorderColor: 'rgba(0, 0, 0, 0)',
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: '#2d84b4',
pointHoverBorderColor: '#2d84b4',
},
],
};
const config = {
type: 'line',
data: data,
options: {
animation: {
duration: 0,
},
responsive: true,
maintainAspectRatio: false,
plugins: {
//Do not display legend.
legend: {
display: false,
},
},
scales: {
xAxes: {
stacked: true,
ticks: {
stepSize: 2,
},
grid: {
display: true,
drawBorder: false,
drawOnChartArea: false,
drawTicks: true,
tickLength: 4,
type: 'time',
},
},
yAxes: {
grid: {
drawBorder: false,
drawTicks: false,
},
},
},
elements: {
point: {
radius: 5,
},
},
},
};
// Initialize the Chart.
const myChart = new Chart(document.getElementById('myChart'), config);
window.addEventListener('beforeprint', () => {
myChart.resize(600, 600);
});
window.addEventListener('afterprint', () => {
myChart.resize();
});
//Disable all animations!
myChart.options.animation = false;
myChart.options.animations.colors = false;
myChart.options.animations.x = false;
myChart.options.transitions.active.animation.duration = 0;
The points seemed to work just fine with your transparent background, only on hover you setted a normal background again so the pointHoverBackgroundColor should also be transparent.
To make the point bigger on hover you can use the hoverRadius and to make the line have the same width you can use the pointHoverBorderWidth:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'black',
borderColor: '#2d84b4',
borderWidth: 2,
pointBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBackgroundColor: 'rgba(0, 0, 0, 0)',
pointHoverBorderColor: '#2d84b4',
hoverRadius: 10,
pointHoverBorderWidth: 2
}]
},
options: {}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>
I have 3 values on each column (min, medium, max), I need position each box on correct position by value, and if 2 box or 3 box have same value or values very close, I need group (like last box of image), and the boxes need to have minHeight or something like this to fit the text inside:
I have some code here:
http://jsfiddle.net/to2z4dyv/
New fiddle update:
http://jsfiddle.net/vdgphk3L/
$(function() {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: false
},
plotOptions: {
columnrange: {
grouping: false,
pointPadding: -0.20
}
},
legend: {
enabled: true
},
series: [{
name: 'Minimo',
color: 'green',
data: [
[10, 2000, 2999],
[20, 5000, 6000],
[30, 3000, 4000],
[40, 8000, 9000],
[50, 3500, 4000]
],
dataLabels: {
enabled: false,
borderRadius: 2,
inside: true,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
format: '{point.y}',
//color: 'rgba(0,0,0)'
}
}, {
name: 'Medio',
color: 'yellow',
data: [
[10, 3000, 3999],
[20, 6001, 7000],
[30, 4001, 5000],
[40, 9001, 9500],
[50, 4001, 4500]
],
dataLabels: {
enabled: false,
borderRadius: 2,
inside: true,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
format: '{point.y}',
//color: 'rgba(0,0,0)'
}
}, {
name: 'Maximo',
color: 'blue',
data: [
[10, 4000, 5000],
[20, 7001, 8000],
[30, 5001, 6000],
[40, 9501, 10000],
[50, 4501, 5000]
],
dataLabels: {
enabled: false,
borderRadius: 2,
inside: true,
backgroundColor: 'rgba(255, 255, 255, 0.8)',
format: '{point.y}',
//color: 'rgba(0,0,0)'
}
}]
});
});
On this example, the [data] have 3 properties, I believe that I need to have only 2, one for the value and the other for the X axis...
I archieve this result http://jsfiddle.net/mv9vsmnn/, it was not exactly what I needed, but it solved my problem.
$(function() {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: false,
},
xAxis: {
categories: ['Title 1', 'Title 2', 'Title 3', 'Title 4', 'Title 5'],
alternateGridColor: '#F6F9FC',
},
tooltip: {
shared: true,
width: 20,
formatter: function() {
var retorno = '<strong>Prices</strong>';
$.each(this.points, function(i, point) {
if (point.series.name == 'Min' || point.series.name == 'Med' || point.series.name == 'Max') {
retorno += '<br /><span style="color:' + point.color + '">\u25CF</span> ' + point.series.name + ': ' + numberToReal(point.y);
}
});
return retorno;
}
},
plotOptions: {
columnrange: {
grouping: false,
pointWidth: 70,
minPointLength: 25,
dataLabels: {
inside: true,
enabled: true,
allowOverlap: true,
formatter: function() {
if (this.y == this.point.low) {
return this.point.low;
}
}
}
},
series: {
lineWidth: 0.5
}
},
series: [
// Min
{
name: 'Min',
color: '#C30000',
data: [
[2000, 2001],
[5000, 5001],
[1000, 1001],
[8000, 8001],
[3500, 3501]
],
dataLabels: {
align: 'right',
}
}, {
name: 'Min (Line)',
color: '#C30000',
type: 'spline',
dashStyle: 'shortdot',
data: [
[2000],
[5000],
[1000],
[8000],
[3500]
]
},
// Med
{
name: 'Med',
color: '#215994',
data: [
[3000, 3001],
[6001, 6002],
[3001, 3002],
[9001, 9002],
[4001, 4160]
],
dataLabels: {
align: 'center',
}
}, {
name: 'Med (Line)',
color: '#215994',
type: 'spline',
dashStyle: 'shortdot',
data: [
[3000],
[6001],
[3001],
[9001],
[4001]
]
},
// Max
{
name: 'Max',
color: '#ECEC09',
data: [
[4000, 4001],
[7001, 7002],
[5001, 5002],
[9501, 9502],
[4501, 4502]
],
dataLabels: {
align: 'left',
}
}, {
name: 'Max (Line)',
color: '#ECEC09',
type: 'spline',
dashStyle: 'shortdot',
data: [
[4000],
[7001],
[5001],
[9501],
[4501]
]
}
]
});
});
I have a basic column chart done in Highcharts.
I would like to 'move' (= use CSS transform: translate()) each column in the chart.
I tried to use CSS styles to achieve this, but it obviously broke the positioning rendered by Highcharts.
Is there any way how to change the existing elements in the callback function?
Thank you
Code:
http://jsfiddle.net/tomexx/vrh5kzzz/10/
$(function () {
var config = {
chart: {
type: 'column',
backgroundColor: 'rgba(40,40,40,1)'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
xAxis: {
categories: [
'Likes',
'Comments',
'Shares'
],
tickColor: 'rgba(83,83,83,1)',
gridLineColor: 'rgba(83,83,83,1)',
gridLineWidth: 1,
minorGridLineColor: 'rgba(83,83,83,1)',
lineColor: 'rgba(83,83,83,1)'
},
yAxis: {
min: 0,
title: {
text: ''
},
gridLineColor: 'rgba(83,83,83,1)',
minorGridLineColor: 'rgba(83,83,83,1)',
lineColor: 'rgba(83,83,83,1)'
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0,
animation: false,
enableMouseTracking: false,
}
},
series: [{
color: 'rgba(126,200,54,1)',
data: [44, 73, 20],
pointPadding: 0.3,
pointPlacement: 0.16
}, {
color: 'rgba(43,205,203,1)',
data: [150, 88, 20],
pointPadding: 0.3,
pointPlacement: 0.04
}, {
color: 'rgba(168,68,214,1)',
data: [63, 33, 10],
pointPadding: 0.3,
pointPlacement: -0.04
}, {
color: 'rgba(255,191,0,1)',
data: [86, 245, 222],
pointPadding: 0.3,
pointPlacement: -0.12
}]
};
$('#container').highcharts(config);
});
Instaed of CSS styles, you can use pointPlacement value with number.
Since Highcharts 3.0.2, the point placement can also be numeric, where
0 is on the axis value, -0.5 is between this value and the previous,
and 0.5 is between this value and the next. Unlike the textual
options, numeric point placement options won't affect axis padding.
So, I've bene looking at the highcharts API, for an option to change the color of the point background color, when hovering the chart.
This is my current chart: JSFiddle Example
And the code:
$(function () {
$('#main-chart').highcharts({
chart: {
type: 'area'
},
plotBorderColor: '#000000',
plotBackgroundColor: '#000000',
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Number of Clicks'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
lineColor: '#4adefa',
color: '#f1faf7',
data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]
}, {
name: 'USSR/Russia',
lineColor: '#44d99f',
color: '#f1faf7',
data: [215, 125, 450, 120, 150, 200, 426, 660, 869, 1060, 900, 340, 429]
}]
});
});
When hovering the chart, the "point marker" is a round gray circle - I want to change that to be a round circle with a white background and green border.
Is this possible?
You can add this to your plotOptions if you want the style of the points to be the same for every series.
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
}
A working fiddle can be found here:
http://jsfiddle.net/gwdufurk/3/
If you want to have the styles of the points to be different for each series you can set the marker.states.hover attributes for each series like so:
series: [{
name: 'USA',
lineColor: '#4adefa',
color: '#f1faf7',
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
fillColor: 'white',
lineColor: 'green',
lineWidth: 0
}
}
},
data: [251, 122, 511, 424, 291, 426, 121, 342, 110, 235, 369, 640,250]
// other series here.
}
See fiddle here http://jsfiddle.net/gwdufurk/4/.
You can change the color of the markers like so:
...
marker: {
fillColor: 'green',
...
Edit: Fiddle with red markers
Different Marker Color for Hover Pointer,
data: [
{ name: 'Point 1',color: '#4adefa', y: 251 },
{ name: 'Point 2',color: '#000000', y: 122 },
{ name: 'Point 3',color: '#A25429', y: 511 },
{ name: 'Point 4',color: '#AA1111', y: 524 },
{ name: 'Point 5',color: '#DF2500', y: 291 },
{ name: 'Point 6',color: '#007ACF', y: 342 },
{ name: 'Point 7',color: '#ECD66E', y: 110 },
]
See fiddle here:http://jsfiddle.net/UI_Designer/gwdufurk/5/