Develop Reference

Is there a property in for ChartJS that allows you to align bars to the left?

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,
}
}
}
};

How to add background color for apexcharts y-axis?

Using apex chart
My code - Fiddle
var options = {
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
}, {
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14]
}, {
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
borderRadius: 8,
horizontal: false,
},
},
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
'01/05/2011 GMT', '01/06/2011 GMT'
],
},
yaxis: {
labels: {
style: {
fontSize: "12px",
fontWeight: 400,
fontFamily: "Open Sans",
colors: ["#7286EA"],
backgroundColor: '#e7e7e7',
},
},
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>
Add for yaxis labels style - backgroundColor: '#e7e7e7' - but it doesn't work
I try to do as in the image
Thanks in advance for any help

How to add background color for Apexcharts y-axis?
You can add a background playing with javascript and the SVG Apexcharts made.
You can access the SVG they create through querySelector then add elements or other tricks you could think of to make it the way you want.
This lets you be very flexible and do exactly what you want.
var options = {
series: [
{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
},
{
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
},
{
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14]
},
{
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8]
}
],
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
},
events: {
mounted: function() {
addYAxisBackground()
},
updated: function() {
addYAxisBackground()
}
}
},
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}
],
plotOptions: {
bar: {
borderRadius: 8,
horizontal: false
}
},
xaxis: {
type: 'datetime',
categories: [
'01/01/2011 GMT',
'01/02/2011 GMT',
'01/03/2011 GMT',
'01/04/2011 GMT',
'01/05/2011 GMT',
'01/06/2011 GMT'
]
},
yaxis: {
labels: {
style: {
fontSize: '12px',
fontWeight: 400,
fontFamily: 'Open Sans',
colors: ['#7286EA'],
backgroundColor: '#e7e7e7'
}
}
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
}
}
var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()
function addYAxisBackground() {
var ctx = document.querySelector('svg'),
textElm = ctx.querySelector('svg g'),
SVGRect = textElm.getBBox()
var rect = document.createElementNS(
'http://www.w3.org/2000/svg',
'rect'
)
rect.setAttribute('x', SVGRect.x)
rect.setAttribute('y', SVGRect.y)
rect.setAttribute('width', '90px')
rect.setAttribute('height', SVGRect.height + 20)
rect.setAttribute('fill', 'yellow')
ctx.insertBefore(rect, textElm)
}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

I just used inspect and found the svg class for yaxis("apexcharts-yaxis-texts-g") and appended in it ,after trying some values made a rectangle which would somewhat cover the y-axis making it look like a background.
This might work for u.
Edit: Due to appending an element dynamically if the window is resized it would make that element disappeared, for that I used resize event which would fire a function after 500ms to re-add that element.
This counter of 500 ms gets restarted whenever there is a change in the window's dimensions (as we clear the timeout) so the function will only be called if the user stops resizing the window or if the user resizes the window VERY slowly which doesn't happens normally.
var options = {
chart: {
type: 'bar'
},
series: [{
name: 'sales',
data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
}],
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
}
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
var set = document.getElementsByClassName('apexcharts-yaxis-texts-g')[0];
var node = document.createElementNS("http://www.w3.org/2000/svg", "rect");
node.setAttribute('height', '91%');
node.setAttribute('width', '5%');
node.setAttribute('fill', 'cyan');
set.insertBefore(node, set.childNodes[0]);
var func;
window.addEventListener("resize", function(){
clearTimeout(func);
func = setTimeout(doneResizing, 500);
})
function doneResizing(){
var set=document.getElementsByClassName('apexcharts-yaxis-texts-g')[0];
var node = document.createElementNS("http://www.w3.org/2000/svg","rect");
node.setAttribute('height','91%');
node.setAttribute('width','5%');
node.setAttribute('fill','cyan');
set.insertBefore(node, set.childNodes[0]);
}
body {
font-family: Roboto, sans-serif;
}
#chart {
max-width: 650px;
margin: 35px auto;
}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">

If you check the documentation, there is no backgroundColor as an option for yaxis.labels.style. yaxis.labels.style has the following options:
{
colors: [],
fontSize: '12px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 400,
cssClass: 'apexcharts-yaxis-label'
}
Here are the Docs: https://apexcharts.com/docs/options/yaxis/#formatter

Here is a simple way to do this by using CSS variables and background.
function updateBackground() {
const chart = document.querySelector('.apexcharts-canvas');
const yAxis = document.querySelector('.apexcharts-yaxis');
const transform = yAxis.getAttribute('transform');
const translateX = transform.slice(transform.indexOf('(') + 1, transform.indexOf(','));
const yAxisBBox = yAxis.getBBox();
// console.log('yAxisBBox', yAxisBBox);
chart.style.setProperty('--width', yAxisBBox.width + 'px');
chart.style.setProperty('--x', (+translateX + yAxisBBox.x) + 'px');
}
var options = {
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
}, {
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14]
}, {
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
},
events: {
/* run the function on mounted and updated hooks */
mounted: updateBackground,
updated: updateBackground
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
borderRadius: 8,
horizontal: false,
},
},
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
'01/05/2011 GMT', '01/06/2011 GMT'
],
},
yaxis: {
labels: {
style: {
fontSize: "12px",
fontWeight: 400,
fontFamily: "Open Sans",
colors: ["#7286EA"],
backgroundColor: '#e7e7e7',
},
},
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
.apexcharts-canvas {
--padding-x: 10px; /* you can change this by 0 or anything you want */
background-image: linear-gradient(yellow, yellow);
background-position: calc(var(--x) - var(--padding-x)) 0;
background-size: calc(var(--width) + var(--padding-x) * 2) 100%;
background-repeat: no-repeat;
}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>
Cover exact area:
function updateBackground() {
const chart = document.querySelector('.apexcharts-canvas');
const yAxis = document.querySelector('.apexcharts-yaxis');
const transform = yAxis.getAttribute('transform');
const translateX = transform.slice(transform.indexOf('(') + 1, transform.indexOf(','));
const yAxisBBox = yAxis.getBBox();
// console.log('yAxisBBox', yAxisBBox);
chart.style.setProperty('--width', yAxisBBox.width + 'px');
chart.style.setProperty('--height', yAxisBBox.height + 'px');
chart.style.setProperty('--x', (+translateX + yAxisBBox.x) + 'px');
chart.style.setProperty('--y', yAxisBBox.y + 'px');
}
var options = {
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
}, {
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14]
}, {
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
},
events: {
/* run the function on mounted and updated hooks */
mounted: updateBackground,
updated: updateBackground
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
borderRadius: 8,
horizontal: false,
},
},
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
'01/05/2011 GMT', '01/06/2011 GMT'
],
},
yaxis: {
labels: {
style: {
fontSize: "12px",
fontWeight: 400,
fontFamily: "Open Sans",
colors: ["#7286EA"],
backgroundColor: '#e7e7e7',
},
},
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
.apexcharts-canvas {
background: linear-gradient(yellow, yellow) var(--x) var(--y) / var(--width) var(--height) no-repeat;
}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

Jquery chartsjs plugin lines not working properly

im trying to using chartsjs to do a line chart.
new Chart(document.getElementById("myChart"), {
type: 'line',
data: {
labels: ['GEN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
datasets: [{
data: [0, 10, 20, 30, 40, 50, 40, 30, 20, 10, 0, 15],
label: "CDL",
borderColor: "#3e95cd",
fill: false
}, {
data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
label: "CLA",
borderColor: "#8e5ea2",
fill: false
}, {
data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
label: "CLB",
borderColor: "#3cba9f",
fill: false
}, {
data: [40, 20, 10, 16, 24, 38, 5, 7, 45, 0],
label: "CLC",
borderColor: "#e8c3b9",
fill: false
}
]
},
options: {
responsive: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true
}
}]
},
legend: {
labels: {
fontColor: 'black'
}
}
}
});
This is my code and it works, but my lines dont starting in "absolute position" and theyr position is like this:
chart_image
I dont understand why, can someone help me?

Fill empty space in line Apache ECharts

is possible in apache echarts to fill space from left and right?
When i'm use boundaryGap: false it looks like that (first and last value are partially hidden):
i need to fill left and right empty spaces and i have no idea how... Thanks
heres my code:
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['a', 'b','c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'],
axisTick: {
show: false,
},
axisLine: {
show:false,
},
},
grid:{
height: 200,
left: 0,
right: 0,
},
yAxis: {
min: -10,
type: 'value',
silent: false,
axisLine:false,
axisLabel: false,
axisTick: false,
minorSplitLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: "#EAEEF6",
opacity: "1",
width: "1",
},
}
},
series: [
{
label: {
normal: {
show: true,
position: 'top',
color: '#474646',
fontSize:12,
fontWeight: 'bold'
}
},
data: [2,1,-4,-4,-3,-3,-5,-4,0,1,1.5,2],
type: 'line',
smooth: true,
}
],
}
https://jsfiddle.net/zm8whknr/

Option 1: You can modify the grid.left and grid.right options to set the left and right spacing of the chart to accommodate the cropped values,
grid:{
height: 200,
left: 10,
right: 10,
},
Result:
Option 2: You can align the first and last element's xaxis label and data label to 'left' and 'right' to avoid cropping.
Modified xAxis option,
xAxis.data = [{value:'a', textStyle:{'align': 'left'}}, ... ,{value:'l', textStyle:{'align': 'right'}}],
Modified Series data option,
series[0].data = [{value:2, label:{'align': 'left'}}, ... , {value:2, label:{'align': 'right'}}],
Chart Option,
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: [{value:'a', textStyle:{'align': 'left'}},'b','c','d','e','f','g','h','i','j','k',{value:'l', textStyle:{'align': 'right'}}],
axisTick: {
show: false,
},
axisLine: {
show:false,
},
},
grid:{
height: 200,
left: 0,
right: 0,
},
yAxis: {
min: -10,
type: 'value',
silent: false,
axisLine:false,
axisLabel: false,
axisTick: false,
minorSplitLine: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: "#EAEEF6",
opacity: "1",
width: "1",
},
}
},
series: [
{
label: {
normal: {
show: true,
position: 'top',
color: '#474646',
fontSize:12,
fontWeight: 'bold'
}
},
data: [{value:2, label:{'align': 'left'}},1,-4,-4,-3,-3,-5,-4,0,1,1.5, {value:2, label:{'align': 'right'}}],
type: 'line',
smooth: true,
animationDelay: idx => idx * 100,
lineStyle: {
normal: {
width: 4,
color:'#29d9c9',
shadowColor: 'rgba(41, 217, 201, 0.5)',
shadowOffsetX: 0,
shadowOffsetY: 8,
shadowBlur: 10
},
},
areaStyle: {
origin: 'start',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 214, 143, 0.3)',
}, {
offset: 1,
color: 'rgba(0, 214, 143, 0)',
}]),
opacity: 1,
},
itemStyle:{
color: '#29d9c9',
borderWidth: 5
},
symbolSize: 5
}
],
animationEasing: 'elasticOut',
animationDelayUpdate: idx => idx * 5,
}

Is there a way to limit legends on a horizontal layout on specific amount of rows during export?

I am using Highcharts latest version and trying to export a chart on a png and trying to see if there is a way to limit the number of rows shown on the exported png using the horizontal layout up to 2 rows if the legends are breaking into more than 2 rows.
A working export example is here: https://jsfiddle.net/siluok3/085gzjtn/7/
Highcharts.chart('container', {
chart: {
style: {
fontFamily: '"Arial", sans-serif',
color: '#7b797a',
'z-index': 'inherit'
},
resetZoomButton: {
theme: {
fill: '#5cb85c',
stroke: '#4cae4c',
style: {
color: '#fff',
fontSize: '15px'
},
r: 3,
states: {
hover: {
fill: '#449d44',
stroke: '#398439'
}
}
}
}
},
title: {
text: 'Data labels only visible on export'
},
credits: {
enabled: false,
style: {
display: "none"
}
},
legend: {
useHTML: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 32,
itemStyle: {
color: '#7b797a',
fontWeight: "normal"
},
itemHoverStyle: {
color: '#7b797a'
}
},
navigation: {
buttonOptions: {
theme: {
'stroke-width': 0,
r: 0,
fill: null,
states: {
hover: {
fill: null
},
select: {
stroke: null,
fill: null
}
}
}
},
menuItemHoverStyle: {
background: '#008add'
}
},
xAxis: {
labels: {
rotation: 270
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mayfsdfdsfdsf', 'Junfdfsd', 'Julfsdfsdfds', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [6, 4, 2],
name: 'Firfdsfdsst'
}, {
data: [7, 3, 2],
name: 'Secfsdfdsdfond'
}, {
data: [9, 4, 8],
name: 'Third'
}, {
data: [1, 2, 6],
name: 'Fourth'
}, {
data: [4, 6, 4],
name: 'Fifdsfdsfdsfdsfsdfth'
}, {
data: [1, 2, 7],
name: 'Sixth'
}, {
data: [4, 2, 5],
name: 'Sevefdsfdsfdsfsdnth'
}, {
data: [8, 3, 2],
name: 'Efdsfdsfdsfdsighth'
}, {
data: [4, 5, 6],
name: 'Nifdsfdsfdsfdsfdsfnth'
}, {
data: [4, 2, 5],
name: 'Sevefdsfdsfdsfsdnth'
}, {
data: [8, 3, 2],
name: 'Efdsfdsfdsfdsighth'
}, {
data: [4, 5, 6],
name: 'Nifdsfdsfdsfdsfdsfnth'
}],
exporting: {
chartOptions: {
legend: {
title: {
text: '',
},
itemHiddenStyle: {
display: 'none',
},
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
itemDistance: 10,
y: 0,
itemMarginTop: 5,
itemStyle: {
fontSize: '10px',
},
symbolPadding: 2,
alignColumns: false,
},
rangeSelector: {
enabled: false
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
}
}
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
As you can see the legends break into a 3rd row if they are more or larger. Is there an intuitive way to find a workaround?

You can use itemWidth property to limit the width of the item and, as a result, the number of rows. Unfortunately for now there is no built-in solution for dynamically adjusting the number of rows in the legend.
exporting: {
chartOptions: {
legend: {
itemWidth: 90,
...
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/gtjewc1v/
API Reference: https://api.highcharts.com/highcharts/legend.itemWidth