We Keep Coding

How not to round values in apexchart

I need the graph to display the values without rounding, the same as shown in the tooltip

In your chart options dataLabels use the formatter to define the display value, e.g.
dataLabels: {
formatter: function(val) {
return val.toFixed(2);
}
}
Full example with demo chart taken from official docs and added custom label:
var options = {
series: [{
name: 'Marine Sprite',
data: [44, 55, 41, 37, 22, 43, 21]
}, {
name: 'Striking Calf',
data: [53, 32, 33, 52, 13, 43, 32]
}, {
name: 'Tank Picture',
data: [12, 17, 11, 9, 15, 11, 20]
}, {
name: 'Bucket Slope',
data: [9, 7, 5, 8, 6, 9, 4]
}, {
name: 'Reborn Kid',
data: [25, 12, 19, 32, 25, 24, 10]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
stackType: '100%'
},
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ['#fff']
},
title: {
text: '100% Stacked Bar'
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
},
dataLabels: {
formatter: function(val) {
return val.toFixed(2);
}
},
tooltip: {
y: {
formatter: function(val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>

How To Change Layout to Horizontal in Chart Js

I've chart and it's currently a vertical bar chart but I wanted to make it completely horizontal so how can I do it?
import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";
import { Bar } from "react-chartjs-2";
require("./RoundedBars.js");
class App extends Component {
constructor() {
super();
this.state = {
data: {
labels: ["Week I", "Week II", "Week III", "Week IV"],
datasets: [
{
label: "Pending Approval",
backgroundColor: "rgb(51, 153, 255)",
data: [20, 10, 30, 15],
stack: 1,
name: "AMR"
},
{
label: "Invoice Created",
backgroundColor: "rgb(51, 204, 51)",
data: [60, 20, 20, 30],
stack: 1
},
{
label: "Approved!",
backgroundColor: "green",
data: [40, 50, 20, 45],
stack: 1
},
{
label: "Pending Approval",
backgroundColor: "rgb(51, 153, 255)",
data: [25, 5, 20, 10],
stack: 2
},
{
label: "Invoice Created!",
backgroundColor: "rgb(51, 204, 51)",
data: [51, 25, 10, 30],
stack: 2
},
{
label: "Approved!",
backgroundColor: "green",
data: [45, 40, 22, 55],
stack: 2
},
{
label: "Pending Approval",
backgroundColor: "rgb(51, 153, 255)",
data: [35, 5, 25, 10],
stack: 3
},
{
label: "Invoice Created!",
backgroundColor: "rgb(51, 204, 51)",
data: [51, 25, 10, 30],
stack: 3
},
{
label: "Approved!",
backgroundColor: "green",
data: [45, 40, 22, 55],
stack: 3
},
{
label: "Pending Approval",
backgroundColor: "rgb(51, 153, 255)",
data: [15, 5, 21, 17],
stack: 4
},
{
label: "Invoice Created!",
backgroundColor: "rgb(51, 204, 51)",
data: [51, 25, 10, 30],
stack: 4
},
{
label: "Approved!",
backgroundColor: "green",
data: [45, 40, 22, 55],
stack: 4
}
]
},
options: {
cornerRadius: 10,
legend: {
labels: {
generateLabels: function(chart) {
return Chart.defaults.global.legend.labels.generateLabels
.apply(this, [chart])
.filter(function(item, i) {
return i <= 2;
});
}
}
},
scales: {
xAxes: [
{
id: "xAxis1",
type: "category",
ticks: {
display: false
}
},
{
id: "xAxis2",
type: "linear",
ticks: {
beginAtZero: true,
max: 4,
min: 0,
stepSize: 0.25,
labelOffset: 15,
callback: function(value, index, values) {
var array = ["W1", "W2", "W3", "W4"];
// console.log("values: ", index % array.length) ;
if (index == values.length - 1) return "";
return array[index % array.length];
}
}
},
{
id: "xAxis3",
type: "linear",
ticks: {
beginAtZero: true,
max: 4,
min: 0,
stepSize: 1,
labelOffset: 55,
callback: function(value, index, values) {
var weeks = ["Week I", "Week II", "Week III", "Week IV"];
return weeks[index];
}
}
}
],
yAxes: [
{
stacked: true
}
]
},
tooltips: {
mode: "nearest",
callbacks: {
title: function(tooltipItem, data) {
const arr = [
"W1",
"W1",
"W1",
"W2",
"W2",
"W2",
"W3",
"W3",
"W3",
"W4",
"W4",
"W4"
];
// console.log(tooltipItem);
return arr[tooltipItem[0].datasetIndex];
}
}
}
}
};
}
render() {
return (
<div>
<Bar data={this.state.data} options={this.state.options} />
</div>
);
}
}
render(<App />, document.getElementById("root"));
StackBlitz Demo

To make it horizontal, you should use HorizontalBar component instead of Bar component. Obviously, you will need to update your data a little bit, to make sure it can be displayed in HorizontalBar - but that's the way to have horizontal bar.
Here is a quick example on how to use HorizontalBar:
Using react-chartjs-2
https://codesandbox.io/s/jjpk3o5l3?file=/src/Hello.js
Using original library:
https://www.chartjs.org/docs/latest/charts/bar.html#horizontal-bar-chart

Modify point style when it has drawn tick in ChartJs

I am migrating from Highcharts to ChartJs (v2.8), and in Highcharts, I can get the drawn ticks, and then modify the point style relational with this tick, as shown below:
but in ChartJs I don't see any way of doing that, I don't be able to get the drawn ticks and I don't see the way of modifying the style of only some points either. It's not possible?
Actual config:
var options = {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
datasets: [
{
data: [611, 605, 594, 581, 573, 578, 585, 587, 588, 595, 601, 605, 608, 610, 612, 611, 612, 613, 616, 618, 621, 623, 625, 627, 628, 631, 636, 638, 643, 650],
fill: false,
borderWidth: 1,
pointRadius: 3,
pointBorderWidth: 1,
pointBackgroundColor: "#adadad",
pointHoverRadius: 6,
pointHoverBorderColor: "#adadad",
pointHoverBackgroundColor: `${"#adadad"}30`,
pointHoverBorderWidth: 1,
},
]
},
options: {
responsive: true,
tooltips: {
mode: 'interpolate',
intersect: false,
},
scales: {
xAxes: [{
gridLines: {
display: false,
},
distribution: 'series',
time: {
displayFormats: {
month: '%e. %b',
},
},
ticks: {
maxRotation: 0,
autoSkip: true,
autoSkipPadding: 10,
},
}],
yAxes: [{
gridLines: {
drawBorder: false,
},
ticks: {
padding: 15,
},
}],
},
colors: [{
borderColor: "#adadad",
}],
showLegend: false,
}
}
Example

Send value from index.php to apex chart .js file

The following is the "dashbaord.js" file in a admin dashboard script.
I want to transfer data from my index.php to display different Apex chart data
instead of the "series1", "series2" and the "categories" I want to send custom values. How can I do that ?
I can manage php, but I know nothing about javascript.
I tried to put <?php.. inside the .js file and it didnt work.
// currently sale
var options = {
series: [{
name: 'series1',
data: [6, 20, 15, 40, 18, 20, 18, 23, 18, 35, 30, 55, 0]
}, {
name: 'series2',
data: [2, 22, 35, 32, 40, 25, 50, 38, 42, 28, 20, 45, 0]
}],
chart: {
height: 240,
type: 'area',
toolbar: {
show: false
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
xaxis: {
type: 'category',
low: 0,
offsetX: 0,
offsetY: 0,
show: false,
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan"],
labels: {
low: 0,
offsetX: 0,
show: false,
},
axisBorder: {
low: 0,
offsetX: 0,
show: false,
},
},
markers: {
strokeWidth: 3,
colors: "#ffffff",
strokeColors: [ CubaAdminConfig.primary , CubaAdminConfig.secondary ],
hover: {
size: 6,
}
},
yaxis: {
low: 0,
offsetX: 0,
offsetY: 0,
show: false,
labels: {
low: 0,
offsetX: 0,
show: false,
},
axisBorder: {
low: 0,
offsetX: 0,
show: false,
},
},
grid: {
show: false,
padding: {
left: 0,
right: 0,
bottom: -15,
top: -40
}
},
colors: [ CubaAdminConfig.primary , CubaAdminConfig.secondary ],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.5,
stops: [0, 80, 100]
}
},
legend: {
show: false,
},
tooltip: {
x: {
format: 'MM'
},
},
};
var chart = new ApexCharts(document.querySelector("#chart-currently"), options);
chart.render();

ReactJS ApexCharts not displaying tooltip

I take one of the examples posted and slightly modify it by removing some data. When the sets don't have the same number of data points, the tooltips stop displaying.
Please see the following two examples. The first one being the one posted in the docs. The second, the modified version. When hovering starting from the end data points, the tooltip doesn't display anything for the last columns.
Example from docs: https://codepen.io/junedchhipa/pen/YJQKOy
var options = {
chart: {
height: 310,
type: 'line',
stacked: false,
},
stroke: {
width: [0, 2, 5],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Series Column',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'Series Area',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}, {
name: 'Series Line',
type: 'line',
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
}],
fill: {
opacity: [0.85,0.25,1],
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55,
stops: [0, 100, 100, 100]
}
},
labels: ['01/01/2003', '02/01/2003','03/01/2003','04/01/2003','05/01/2003','06/01/2003','07/01/2003','08/01/2003','09/01/2003','10/01/2003','11/01/2003'],
markers: {
size: 0
},
xaxis: {
type:'datetime'
},
yaxis: {
title: {
text: 'Points',
},
min: 0
},
legend: {
show: false
},
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
// check if the checkbox has any unchecked item
checkLegends()
function checkLegends() {
var allLegends = document.querySelectorAll(".legend input[type='checkbox']")
for(var i = 0; i < allLegends.length; i++) {
if(!allLegends[i].checked) {
chart.toggleSeries(allLegends[i].value)
}
}
}
// toggleSeries accepts a single argument which should match the series name you're trying to toggle
function toggleSeries(checkbox) {
chart.toggleSeries(checkbox.value)
}
Modified example:
https://codepen.io/mmk2118/pen/mdbpOWN
var options = {
chart: {
height: 310,
type: 'line',
stacked: false,
},
stroke: {
width: [0, 2, 5],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Series Column',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'Series Area',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41]
}, {
name: 'Series Line',
type: 'line',
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
}],
fill: {
opacity: [0.85,0.25,1],
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55,
stops: [0, 100, 100, 100]
}
},
labels: ['01/01/2003', '02/01/2003','03/01/2003','04/01/2003','05/01/2003','06/01/2003','07/01/2003','08/01/2003','09/01/2003','10/01/2003','11/01/2003'],
markers: {
size: 0
},
xaxis: {
type:'datetime'
},
yaxis: {
title: {
text: 'Points',
},
min: 0
},
legend: {
show: false
},
tooltip: {
shared: true,
intersect: false,
y: {
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
// check if the checkbox has any unchecked item
checkLegends()
function checkLegends() {
var allLegends = document.querySelectorAll(".legend input[type='checkbox']")
for(var i = 0; i < allLegends.length; i++) {
if(!allLegends[i].checked) {
chart.toggleSeries(allLegends[i].value)
}
}
}
// toggleSeries accepts a single argument which should match the series name you're trying to toggle
function toggleSeries(checkbox) {
chart.toggleSeries(checkbox.value)
}

Your codepen example uses an older version of ApexCharts.
Please update by pulling the latest version here
https://cdn.jsdelivr.net/npm/apexcharts#latest
Also, if you have a different number of data-points in each series, you can turn off shared tooltip and only show the tooltip when the user hovers over bars/markers directly.
tooltip: {
shared: false,
intersect: true
}