Develop Reference

How can I start Chartjs bars from left side instead of center?

I created a bar chart using ChartJS. The problem is when a data point is small like 2 length. It align all bars in center.
But I don't want this.
The canvas width is 100% to its wrapper. Bars thickness max 14.Below is my code summary. Please help.
The output is like that but i want to both of them bars align to left.
const dataSet = {
type: 'bar',
labels: labels,
datasets:
data.dataSets.length === 1
? [
{
data: data.dataSets[0].data,
backgroundColor: data.dataSets[0].color,
borderRadius: 20,
borderWidth: 0,
barPercentage: 0.4,
maxBarThickness: 14,
hoverBorderWidth: 1,
hoverBackgroundColor: data.dataSets[0].color,
},
{
xAxisID: 'axisX2',
yAxisID: 'axisY2',
label: ' ',
backgroundColor: '#4C4E6414',
hoverBackgroundColor: '#4C4E6414',
hoverBorderWidth: 0,
borderWidth: 0,
barPercentage: 0.4,
maxBarThickness: 14,
borderRadius: 20,
data: data.dataSets[0].data.map((item: any) => 1000),
},
]
: data.dataSets.map((item: any) => {
return {
data: item.data,
backgroundColor: item.color,
borderRadius: 20,
borderWidth: 0,
barPercentage: 0.4,
maxBarThickness: 14,
hoverBorderWidth: 1,
hoverBackgroundColor: item.color,
};
}),
};
<Bar
id="bar-chart"
data={dataSet}
options={{
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'nearest',
axis: 'x',
intersect: false,
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: true,
backgroundColor: '#F7F7F9',
titleColor: 'rgba(76, 78, 100, 0.3)',
titleFont: {
size: 13,
},
bodyColor: 'rgba(76, 78, 100, 0.5)',
filter: function (tooltipItem) {
return data.dataSets.length === 1 ? tooltipItem.datasetIndex !== 1 : true;
},
displayColors: data.dataSets.length === 1 ? false : true,
callbacks: {
label: function (tooltipItem) {
return data.dataSets[tooltipItem.datasetIndex]?.label + ' ' + currency + tooltipItem.formattedValue;
},
labelColor: function (tooltipItem) {
return {
borderColor: 'transparent',
backgroundColor: data.dataSets[tooltipItem.datasetIndex]?.color,
borderWidth: 2,
borderRadius: 5,
};
},
},
},
},
scales: {
x: {
axis: 'x',
beginAtZero: true,
border: {
display: false,
},
grid: {
display: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
y: {
axis: 'y',
beginAtZero: true,
border: {
display: false,
},
grid: {
drawTicks: false,
display: false,
},
ticks: {
display: false,
padding: 0,
mirror: true,
},
},
axisX2: {
axis: 'x',
position: 'left',
beginAtZero: true,
border: {
display: false,
},
grid: {
display: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
axisY2: {
axis: 'y',
position: 'left',
beginAtZero: true,
border: {
display: false,
},
grid: {
drawTicks: false,
display: false,
},
ticks: {
padding: 0,
display: false,
mirror: true,
},
},
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
},
}}
/>

How to draw ApexCharts crosshair line from the marker (y value) to the bottom?

Using apexchart
const data = [45, 52, 78, 45, 69, 23, 30, 45, 52, 88]
const dataXCategories = ["10.12", "11.12", "12.12", "13.12", "14.12", "15.12", "16.12", "17.12", "18.12", "19.12"]
new ApexCharts(chart, {
chart: {
height: 165,
type: "area",
toolbar: {
show: false
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
width: 2,
dashArray: 0,
},
colors: ["#00f"],
dataLabels: {
enabled: false
},
series: [{
name: "Series 1",
data: data
}],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: .7,
opacityTo: .9,
stops: [0, 90, 100]
}
},
xaxis: {
categories: dataXCategories,
labels: {
show: true,
format: 'dd/MM',
style: {
fontSize: "11px",
fontWeight: 400,
fontFamily: "Inter",
colors: ["#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999", "#999"],
}
},
crosshairs: {
show: true,
opacity: 1,
position: 'front',
stroke: {
color: '#4A3AFF',
width: 2,
dashArray: 0
}
}
},
yaxis: {
min: 0,
max: 100,
tickAmount: 4,
labels: {
show: true,
offsetX: -12,
style: {
fontSize: "11px",
fontWeight: 400,
fontFamily: "Inter",
colors: ["#999"],
},
formatter: function(value) {
return `${value}%`;
}
},
},
grid: {
show: true,
borderColor: '#EDEDED',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: .5
},
column: {
colors: undefined,
opacity: .5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
markers: {
colors: '#4A3AFF',
hover: {
size: undefined,
sizeOffset: 7
}
}
}).render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>
Now the blue line is equal to the height of the graph
Please tell me how to make the line start from the marker to the bottom line x
I will be glad for any help

I do not think you can do this with simple configuration. However, since ApexCharts is based on SVG, you can manipulate the DOM yourself quite easily.
As I said previously in other answers, because I have already used this technique several times, what I am going to show you is more experimental than official.
It works, though.
In your case, the idea is to put some code in the mouseMove event callback. The use of a MutationObserver is recommended to watch for changes in the DOM. When a marker (which is a circle) is hovered, its r, cx and cy attributes are updated. In particular, cy is the most interesting because it gives us the vertical position of the active marker. r is also useful to adjust the offset of crosshairs.
Here is the main part of the code:
chart: {
// ...
events: {
mouseMove: () => {
let crosshairs = document.querySelector('.apexcharts-xcrosshairs'),
marker = document.querySelector('.apexcharts-marker');
let settings = { attributes: true },
observer = new MutationObserver(() => {
crosshairs.setAttribute('y1', `${marker.cy.baseVal.value + marker.r.baseVal.value + 1}`);
});
observer.observe(marker, settings);
}
}
},
Here is the full code:
const data = [45, 52, 78, 45, 69, 23, 30, 45, 52, 88];
const dataXCategories = ["10.12", "11.12", "12.12", "13.12", "14.12", "15.12", "16.12", "17.12", "18.12", "19.12"];
new ApexCharts(chart, {
chart: {
height: 165,
type: 'area',
toolbar: {
show: false
},
events: {
mouseMove: () => {
let crosshairs = document.querySelector('.apexcharts-xcrosshairs'),
marker = document.querySelector('.apexcharts-marker');
let settings = { attributes: true },
observer = new MutationObserver(() => {
crosshairs.setAttribute('y1', `${marker.cy.baseVal.value + marker.r.baseVal.value + 1}`);
});
observer.observe(marker, settings);
}
}
},
stroke: {
show: true,
curve: 'smooth',
lineCap: 'butt',
colors: undefined,
width: 2,
dashArray: 0,
},
colors: ['#00f'],
dataLabels: {
enabled: false
},
series: [{
name: 'Series 1',
data: data
}],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: .7,
opacityTo: .9,
stops: [0, 90, 100]
}
},
xaxis: {
categories: dataXCategories,
labels: {
show: true,
format: 'dd/MM',
style: {
fontSize: '11px',
fontWeight: 400,
fontFamily: 'Inter',
colors: ['#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999', '#999']
}
},
crosshairs: {
show: true,
opacity: 1,
position: 'front',
stroke: {
color: '#4A3AFF',
width: 2,
dashArray: 0
}
}
},
yaxis: {
min: 0,
max: 100,
tickAmount: 4,
labels: {
show: true,
offsetX: -12,
style: {
fontSize: '11px',
fontWeight: 400,
fontFamily: 'Inter',
colors: ['#999']
},
formatter: value => `${value}%`
},
},
grid: {
show: true,
borderColor: '#EDEDED',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: .5
},
column: {
colors: undefined,
opacity: .5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
markers: {
colors: '#4A3AFF',
hover: {
size: undefined,
sizeOffset: 7
}
}
}).render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart" class="apex-charts" dir="ltr"></div>

Secondary Axis to Scale on Chart

I am trying to get both lines on my chart to scale correctly, I have read through the documentation but can't seem to find how to do this.
images
The above image shows what happens to the orange line when a secondary axis is added. It's like they are using the same scale rather than their own.
I currently have the below code:
$(function(e) {
/*-----echart1-----*/
var options = {
chart: {
height: 300,
type: "line",
stacked: false,
toolbar: {
enabled: false
},
dropShadow: {
enabled: true,
opacity: 0.1,
},
},
colors: ["#f99433", '#6759C8'],
dataLabels: {
enabled: false
},
stroke: {
curve: "straight",
width: [3, 3, 0],
dashArray: [0, 4],
lineCap: "round"
},
grid: {
padding: {
left: 0,
right: 0
},
strokeDashArray: 3
},
markers: {
size: 0,
hover: {
size: 0
}
},
series: [{
name: "Price",
type: 'line',
data: ["4.12","4.08","3.98","3.99","3.95","4.01"] }, {
name: "Socials",
type: 'line',
data: ["23","17","6","6","7","7"] }],
yaxis: [
{
title: {
text: "Price",
},
},
{
opposite: true,
title: {
text: "Socials"
}
}
],
xaxis: {
type: "month",
categories: ["2021-12-09 17:01:25","2021-12-09 18:01:29","2021-12-09 19:01:33","2021-12-09 20:01:37","2021-12-09 21:01:42","2021-12-09 22:01:45"],
axisBorder: {
show: false,
color: 'rgba(119, 119, 142, 0.08)',
},
labels: {
style: {
color: '#8492a6',
fontSize: '12px',
},
},
},
fill: {
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55
}
},
tooltip: {
show:false
},
legend: {
position: "top",
show:true
}
}
var chart = new ApexCharts(document.querySelector("#chartArea"), options);
chart.render();

ApexCharts: Line graph overflowing out of Y axes

Hope you guys are doing okay.
I am working on a line graph from Apex Charts and every thing seems to be working fine except one issue.
The lines cross-over/overflows on the y axes whereas they are supposed to stay between the y axes. I have tried adding offsetX to almost everything but it just doesn't seem to work.
What is it that I am doing wrong here? How can I fix it?
Here's CODEPEN.
Here's an image of the issue:
Here's the snippet:
const lineChartEl = document.querySelector('#line-chart');
const lineChartOptions = {
chart: {
height: '380',
width: "100%",
type: "line",
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.35
},
foreColor: 'red', // numbers color
toolbar: {
show: true,
offsetX: -30,
offsetY: 0,
tools: {
download: true,
selection: true,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
},
export: {
csv: {
filename: 'data',
columnDelimiter: ',',
headerCategory: 'category',
headerValue: 'value',
dateFormatter(timestamp) {
return new Date(timestamp).toDateString()
}
},
svg: {
filename: 'data',
},
png: {
filename: 'data',
}
}
},
autoSelected: 'zoom'
},
legend: {
position: 'top'
},
grid: {
show: true,
padding: {
left: 0,
right: 0
},
borderColor: "rgba(0,0,0,0.1)"
},
colors: ['red', 'blue', 'yellow'],
stroke: {
width: 2,
},
tooltip: {
theme: "dark"
},
series: [{
name: "Cost",
data: [0, 1042, 2120, 3340, 4013, 5012, 6750, 7520, 8055, 9210]
},
{
name: "Revenue",
data: [1131, 2311, 3143, 4565, 6012, 7750, 8520, 9055, 10210, 7530]
},
{
name: "Profit %",
data: [2, 5, 3, 4, 6, 3.4, 2.2, 5.2, 1.3, 3.8]
}
],
yaxis: [{
title: {
text: "Cost / Revenue"
},
seriesName: "Cost",
tickAmount: 5,
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
{
title: {
text: "Kilograms"
},
seriesName: "Weight 1",
show: false
},
{
title: {
text: "Profit %"
},
opposite: true,
tickAmount: 5,
seriesName: "Profit %",
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
],
xaxis: {
tickPlacement: 'on',
axisBorder: {
color: 'red',
},
axisTicks: {
color: 'blue',
},
tooltip: {
enabled: false,
}
},
};
const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>

You can fix it by removing padding inside grid options:
const lineChartEl = document.querySelector('#line-chart');
const lineChartOptions = {
chart: {
height: '380',
width: "100%",
type: "line",
dropShadow: {
enabled: true,
enabledOnSeries: undefined,
top: 0,
left: 0,
blur: 3,
color: '#000',
opacity: 0.35
},
foreColor: 'red', // numbers color
toolbar: {
show: true,
offsetX: -30,
offsetY: 0,
tools: {
download: true,
selection: true,
zoom: false,
zoomin: false,
zoomout: false,
pan: false,
reset: true | '<img src="/static/icons/reset.png" width="20">',
customIcons: []
},
export: {
csv: {
filename: 'data',
columnDelimiter: ',',
headerCategory: 'category',
headerValue: 'value',
dateFormatter(timestamp) {
return new Date(timestamp).toDateString()
}
},
svg: {
filename: 'data',
},
png: {
filename: 'data',
}
}
},
autoSelected: 'zoom'
},
legend: {
position: 'top'
},
grid: {
show: true,
borderColor: "rgba(0,0,0,0.1)"
},
colors: ['red', 'blue', 'yellow'],
stroke: {
width: 2,
},
tooltip: {
theme: "dark"
},
series: [{
name: "Cost",
data: [0, 1042, 2120, 3340, 4013, 5012, 6750, 7520, 8055, 9210]
},
{
name: "Revenue",
data: [1131, 2311, 3143, 4565, 6012, 7750, 8520, 9055, 10210, 7530]
},
{
name: "Profit %",
data: [2, 5, 3, 4, 6, 3.4, 2.2, 5.2, 1.3, 3.8]
}
],
yaxis: [{
title: {
text: "Cost / Revenue"
},
seriesName: "Cost",
tickAmount: 5,
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
{
title: {
text: "Kilograms"
},
seriesName: "Weight 1",
show: false
},
{
title: {
text: "Profit %"
},
opposite: true,
tickAmount: 5,
seriesName: "Profit %",
axisBorder: {
show: true,
color: 'red'
},
axisTicks: {
show: true,
color: 'blue'
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#b6b6b6',
width: 1,
dashArray: 0,
},
},
tooltip: {
enabled: true,
offsetX: 0,
},
},
],
xaxis: {
tickPlacement: 'on',
axisBorder: {
color: 'red',
},
axisTicks: {
color: 'blue',
},
tooltip: {
enabled: false,
}
},
};
const lineChart = new ApexCharts(lineChartEl, lineChartOptions);
lineChart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.27.3/apexcharts.min.js"></script>
<div id="line-chart"></div>

Add Values to data under series dynamically - echarts

I have created a Bar graph using echarts. I want to bind multiple values to data object dynamically, currently I'm able to bind only single value. here is my java script. I'mm a newbie for this, hoping for a fully functional solution.
var myChart = echarts.init(document.getElementById('page_views_today'));
var option = {
// Setup grid
grid: {
zlevel: 0,
x: 20,
x2: 40,
y: 20,
y2: 20,
borderWidth: 0,
backgroundColor: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)',
},
// Add tooltip
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow', // line|shadow
lineStyle: { color: 'rgba(0,0,0,.5)', width: 1 },
shadowStyle: { color: 'rgba(0,0,0,.1)' }
}
},
// Add legend
legend: {
data: []
},
toolbox: {
orient: 'vertical',
show: true,
showTitle: true,
color: ['#bdbdbd', '#bdbdbd', '#bdbdbd', '#bdbdbd'],
feature: {
mark: { show: false },
dataZoom: {
show: true,
title: {
dataZoom: 'Data Zoom',
dataZoomReset: 'Reset Zoom'
}
},
dataView: { show: false, readOnly: true },
magicType: {
show: true,
itemSize: 12,
itemGap: 12,
title: {
line: 'Line',
bar: 'Bar',
},
type: ['line', 'bar'],
option: {
/*line: {
itemStyle: {
normal: {
color:'rgba(3,1,1,1.0)',
}
},
data: [1,2,3,4,5,6,7,8,9,10,11,12]
}*/
}
},
restore: { show: false },
saveAsImage: { show: true, title: 'Save as Image' }
}
},
// Enable drag recalculate
calculable: true,
// Horizontal axis
xAxis: [{
type: 'category',
boundaryGap: false,
data: [
'0h-2h', '2h-4h', '4h-6h', '6h-8h', '8h-10h', '10h-12h', '12h-14h', '14h-16h', '16h-18h', '18h-20h', '20h-22h', '22h-24h'
],
axisLine: {
show: true,
onZero: true,
lineStyle: {
color: 'rgba(63,81,181,1.0)',
type: 'solid',
width: '2',
shadowColor: 'rgba(0,0,0,0)',
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#fff',
type: 'solid',
width: 0,
shadowColor: 'rgba(0,0,0,0)',
},
},
}],
// Vertical axis
yAxis: [{
type: 'value',
splitLine: {
show: false,
lineStyle: {
color: 'fff',
type: 'solid',
width: 0,
shadowColor: 'rgba(0,0,0,0)',
},
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
onZero: true,
lineStyle: {
color: '#ff0000',
type: 'solid',
width: '0',
shadowColor: 'rgba(0,0,0,0)',
shadowBlur: 5,
shadowOffsetX: 3,
shadowOffsetY: 3,
},
},
}],
// Add series
series: [
{
name: 'Page Views',
type: 'bar',
smooth: true,
symbol: 'none',
symbolSize: 2,
showAllSymbol: true,
barWidth: 10,
itemStyle: {
normal: {
color: 'rgba(63,81,181,1.0)',
borderWidth: 2, borderColor: 'rgba(63,81,181,1)',
areaStyle: { color: 'rgba(63,81,181,1)', type: 'default' }
}
},
data: []
}
]
};
Here is my java-script function from where I want to bind the values dynamically.
// Load data into the ECharts instance
load_graph_with_positions(option);
function load_graph_with_positions(option) {
option.series[0].data[0] = 1234;
myChart.setOption(option);
}

One way to do this is by passing values in an array and then shifting the previous values, while pushing-in the data. Following is the example of shiting and pushing the data:
option.series[0].data.shift();
option.series[0].data.push(json.num);
Hence your function will become:
function load_graph_with_positions(option,values) {
var valuesLength = values.length;
for (var i = 0; i < valuesLength; i++) {
option.series[0].data.shift();
option.series[0].data.push(values[i]);
}
myChart.setOption(option);
}
You can also refer to following github example for dynamic addition:
https://github.com/hisune/Echarts-PHP/blob/master/demo/dynamic.php