Hi Talha,

Here's a recommended way to locate and edit the Chart.js settings in Metronic 8:

1. Open the demo page where the chart is displayed.

2. Right-click on the chart and select "Inspect" or "Inspect Element" from the browser's context menu. This will open the browser's Developer Tools.

3. In the Developer Tools, locate the chart element and find its `id` attribute. For example, you might find an element with id ="kt_charts_widget_38_chart"

4. In the demo src folder of your Metronic 8 project, search for the JavaScript file that corresponds to the chart. In this case, you would look for a file named "widget-38.js" in the "src/js/widgets/charts" directory.

5. Open the "widget-38.js" file in your preferred code editor.

6. Inside the file, you will likely find a line similar to

var element = document.getElementById("kt_charts_widget_38_chart");

The graphics I added to the page where my project is, were also added to the page. I pasted the codes in the src/js/widgets/charts widget-38.js file between the script codes on my project page and there is no change when I edit it.

<script>

"use strict";

// Class definition
var KTChartsWidget38 = function () {
var chart = {
self: null,
rendered: false
};

// Private methods
var initChart = function() {
var element = document.getElementById("kt_charts_widget_38_chart");

if (!element) {
return;
}

var height = parseInt(KTUtil.css(element, 'height'));
var labelColor = KTUtil.getCssVariableValue('--bs-gray-900');
var borderColor = KTUtil.getCssVariableValue('--bs-border-dashed-color');

var options = {
series: [{
name: 'LOI Issued',
data: [15, 42, 15, 110, 23, 87, 50]
}],
chart: {
fontFamily: 'inherit',
type: 'bar',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: ['28%'],
borderRadius: 5,
dataLabels: {
position: "top" // top, center, bottom
},
startingShape: 'flat'
},
},
legend: {
show: false
},
dataLabels: {
enabled: true,
offsetY: -28,
style: {
fontSize: '13px',
colors: [labelColor]
},
formatter: function(val) {
return val;// + "H";
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['E2E', 'IMC', 'SSMC', 'SSBD', 'ICCD', 'PAN', 'FTR'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
}
},
crosshairs: {
fill: {
gradient: {
opacityFrom: 0,
opacityTo: 0
}
}
}
},
yaxis: {
labels: {
style: {
colors: KTUtil.getCssVariableValue('--bs-gray-500'),
fontSize: '13px'
},
formatter: function(val) {
return val + "M";
}
}
},
fill: {
opacity: 1
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px'
},
y: {
formatter: function (val) {
return + val + 'M'
}
}
},
colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-primary-light')],
grid: {
borderColor: borderColor,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
}
};

chart.self = new ApexCharts(element, options);

// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}

// Public methods
return {
init: function () {
initChart();

// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}

initChart();
});
}
}
}();

// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget38;
}

// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget38.init();
});




</script>

Hi Talha,

After making the changes, rebuild the assets using the build tool specified in your project's documentation, such as Gulp or Webpack.

https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp

Thanks

is there any other way? I need to see it instantly. I'm pulling data with php