Develop Reference

Chart.js old chart type included and show old chart when hover on new chart in vue.js. also .destroy() method is not working properly

My configuration for chart.
my feature was initially show the chart dynamically. After that there are 3 types of options to change the chart to pie, line, and bar for that i'm doing change the chart type and reinitialize the chart and its work properly but when i'm hover over the new generated chart its flickering and show old chart.
const config = () => {
Chart.plugins.register(ChartDataLabels);
const defaultOptions = {
legend: {
display: props?.legend,
position: window.innerWidth > 1023 ? "right" : "bottom",
align: "start",
labels: {
usePointStyle: true,
pointStyle: "circle",
fontSize: window.innerWidth > 1023 ? 16 : 10,
fontWeight: 600,
fontColor: "#3b3b3b",
},
},
scales:
props.type === "bar"
? {
xAxes: [
{
ticks: {
autoSkip: true,
maxRotation: 90,
minRotation: 0,
fontSize:
window.innerWidth > 1023
? 16
: 10,
fontWeight: 600,
fontColor: "#3b3b3b",
},
},
],
yAxes: [
{
ticks: {
min: 0,
// max: state.max,
// stepSize: state.stepSize,
maxTicksLimit: 6,
callback: getStepValues,
},
},
],
}
: {},
};
// for change type column to bar
let type = state.type;
if (type === "column") {
type = "bar";
}
return {
type: type,
data: {
labels: props.labels,
datasets: [...getDatasets()],
},
options: {
...defaultOptions,
...props.options,
aspectRatio: window.innerWidth > 1023 ? null : 1,
maintainAspectRation: false,
responsive: true,
// events: ["click", "touchstart", "touchmove", "touchend"],
// "mousemove", "mouseout",
mode: "index",
axis: "y",
intersect: false,
animationDuration: 50,
tooltips: {
callbacks: {
title: function (tooltipItem) {
return handleTooltip(tooltipItem);
},
},
},
plugins: {
datalabels: {
formatter: function (value) {
if (props.isPercentageValue) {
return `${Number(value).toFixed(2)}%`;
}
return "";
},
color: "#FFFFFF",
},
zoom: {
zoom: {
onZoom: ({ chart }) => {
const xMin =
chart.scales.x.getLabelForValue(
chart.scales.x.min
);
const xMax =
chart.scales.x.getLabelForValue(
chart.scales.x.max
);
const yMin = chart.scales.y.min;
const yMax = chart.scales.y.max;
console.log(xMin, xMax, yMin, yMax);
},
wheel: {
enabled: true,
},
},
},
},
},
};
};
const initChart = () => {
const ctx = document.getElementById(props.id);
state.chart = new Chart(ctx, config());
return state.chart;
};
I'm try .destroy() and .clear() method before initilizing chart but it does't work properly

Apex Charts donut chart - padding between series items in plot

I am attempting to create a donut chart in apex charts similar to the one shown below (right), I have gotten pretty close, however I need to have some stroke or padding around the series items along the plot of the donut chart as shown.
current configuration
const options = {
chart: {
type: 'donut',
height: 150,
width: '100%',
offsetX: 50
},
plotOptions: {
pie: {
startAngle: 10,
donut: {
size: '90%',
dataLabels: {
enabled: false
},
labels: {
show: true,
name: {
show: true,
offsetY: 38,
formatter: () => 'Completed'
},
value: {
show: true,
fontSize: '48px',
fontFamily: 'Open Sans',
fontWeight: 500,
color: '#ffffff',
offsetY: -10
},
total: {
show: true,
showAlways: true,
color: '#BCC1C8',
fontFamily: 'Open Sans',
fontWeight: 600,
formatter: (w) => {
const total = w.globals.seriesTotals.reduce(
(a, b) => a + b,
0
);
return `${total}%`;
}
}
}
}
},
},
dataLabels: {
enabled: false
},
labels: ['Completed', 'Cancelled', 'Pending', 'Failed'],
legend: {
show: false,
position: 'right',
offsetX: -30,
offsetY: 70,
formatter: (value, opts) => {
return value + ' - ' + opts.w.globals.series[opts.seriesIndex];
},
markers: {
onClick: undefined,
offsetX: 0,
offsetY: 25
}
},
fill: {
type: 'solid',
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
},
stroke: {
width: 0
},
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
};

Try setting the stroke width to greater than 0 and give the stroke same color as the background.
stroke: {
width: 4,
colors: ['#1E252A']
}

I want to make this Javascript function more efficient?

I have three pie charts being generated using Google Charts API. I want to compress this function further as there is a lot of duplication. Is there a loop I can make for it etc.
if (data) {
var myVar = [];
var myVar1 = [];
var myVar2 = [];
myVar.push(['Label', 'Value']);
myVar1.push(['Label', 'Value']);
myVar2.push(['Label', 'Value']);
myVar.push(['Car Sales Today', data.salesToday, ]);
myVar1.push(['Car Sales Yesterday', data.salesYesterday]);
myVar2.push(['Car Sales Last Week', data.salesLastWeek]);
var build1 = {
package: 'PieChart',
data: myVar,
customTooltips: [
data.salesToday,
],
container: 'today-sales-chart',
options: {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: ['#e6dc39'],
pieSliceText: 'none'
}
};
var build2 = {
package: 'PieChart',
data: myVar1,
customTooltips: [
data.salesYesterday,
],
container: 'yesterday-sales-chart',
options: {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: ['#33bb18'],
pieSliceText: 'none'
}
};
var build3 = {
package: 'PieChart',
data: myVar2,
customTooltips: [
data.salesLastWeek
],
container: 'lastweek-sales-chart',
options: {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: ['#e06e29'],
pieSliceText: 'none'
}
};
charts.push(build1, build2, build3);
google.setOnLoadCallback.drawCharts(build1.container);
google.setOnLoadCallback.drawCharts(build2.container);
google.setOnLoadCallback.drawCharts(build3.container);
}
I tried to do the following for example:
var myVar, myVar1, myVar2 = [];
but I get an error. Any help would be great.

I took some time to optimize your code, but I didn't test it. make sure all the variable names are ok, and don't make a conflict on your code
if (data) {
var allData = [{
arr : [['Label', 'Value'], ['Car Sales Today', data.salesToday]],
container : 'today-sales-chart',
customTooltips: data.salesToday
}
,{
arr : [['Label', 'Value'], ['Car Sales Yesterday', data.salesYesterday]],
container : 'yesterday-sales-chart',
customTooltips: data.salesYesterday
}
,{
arr : [['Label', 'Value'], ['Car Sales Last Week', data.salesLastWeek]],
container : 'lastweek-sales-chart',
customTooltips: data.salesLastWeek
}
];
var options = {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: ['#e6dc39'],
pieSliceText: 'none'
}
var builds = [];
for (var index in allData) {
builds.push({
package: 'PieChart',
data: allData[index].arr,
customTooltips: [ allData[index].customTooltips ],
container: allData[index].container,
options: options
});
}
for(var index in builds) {
charts.push(builds[index]);
google.setOnLoadCallback.drawCharts(builds[index].container);
}
}
Update
to add the possibility to change the color, in this case you don't need to use options as an independent variable :
var builds = [];
for (var index in allData) {
builds.push({
package: 'PieChart',
data: allData[index].arr,
customTooltips: [ allData[index].customTooltips ],
container: allData[index].container,
options: {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: allData[index].color, // <--- you set the color here
pieSliceText: 'none'
}
});
}

Passing a PHP variable into flot Bar chart

I am trying to implode my php variable which is an array as one variable into my flot chart.
I implode my PHP variable with JS chart and it worked for me as you can see in the image :
I am trying to get Flot bar data same output with JS Bar chart. Any idea please ?
Thank you
var data = [ 0, <?php echo '['.implode(", ", $studentages).']'?>];
var dataset = [
{ label: "Exams By Student Age", data: data, color: "#5482FF" }
];
var ticks = [ [0, "0-2"]
];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.6 ,
vertical: true ,
show:true
},
xaxis: {
axisLabel: "Exams By Student Ages",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
tickLength:0,
ticks: ticks
},
yaxis: {
axisLabel: "Number of Exams",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
max:20, tickSize:1,
tickFormatter: function (v, axis) {
return v;
}
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
clickable: true,
borderWidth: 1,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
}
};
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
$("#flot-placeholder").UseTooltip();
});
function gd(year, month, day) {
return new Date(year, month, day).getTime();
}
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plotclick", function (event, pos, item) {
var links = [ '../../Chart/StudentTests/result.php'];
if (item)
{
//alert("clicked");
// window.location = (links[item.dataIndex]);
window.open(links[item.dataIndex], '_blank');
console.log(item);
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 40,
left: x - 120,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 10
}).appendTo("body").fadeIn(200);
}
That's what I am getting after I used your code.

If $studentages is an array of integers, this means that
var data = [ 0, [1, 2, 3, 4, 5]];
This is not the correct format for flot data which expects an array of arrays.
So, try:
var data = $.map(<?php echo '['.implode(", ", $studentages).']'?>, function(val, idx){
return [[idx, val]];
});
var dataset = [
{ label: "Exams By Student Age", data: data, color: "#5482FF" }
];
var ticks = [ [0, "0-2"] ]; // expand this for each idx in data

Set different width for each column in highcharts

I need to set different widths for each column in my graph... The width is depends on yaxis value... For example if yaxis value is 23 the width of column with this value will be 50px and value need to be in the middle of the column. And if yaxis value is 234 : the width must be 70px and value in the middle of the column... How i can do this?
My graph is:
options = {
chart: {
renderTo: 'chart',
type: 'column',
width: 450
},
title: {
text: 'A glance overview at your contest’s status'
},
xAxis: {
categories: ['Approved Photos', 'Pending Approval Photos', 'Votes', 'Entrants'],
labels: {
//rotation: -45,
style: {
font: 'normal 9px Verdana, sans-serif, arial'
}
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Amount'
}
},
legend: {
enabled: false
},
series: []
};
series = {
name: "Amount",
data: [],
dataLabels: {
enabled: true,
color: '#000000',
align: 'right',
x: -10,
y: 20,
formatter: function () {
return this.y;
},
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
};
And i set values on this way:
var colors = Highcharts.getOptions().colors;
var index = 0;
options.series = [];
series.data = [];
for (var i in Data) {
if (parseInt(Data[i]) != 0) {
series.data.push({ y: parseInt(Data[i]), color: colors[index] });
index++;
}
else {
series.data.push(null);
}
}
options.series.push(series);
chart = new Highcharts.Chart(options);

Is this what you are looking for http://jsfiddle.net/YCf9z
you can get this by using
pointPadding: 0.1
hope this is useful for you

In Highcharts, one series could have only one width, so if you want to have each bar another width, split your data into series and use pointWidth to set width.