I have a pie chart made with chart.js and currently i'm wondering if its possible to only have a border for the outside of the circle / arc like so:
I tried the following configurations but it applies border the to the whole segment.
options: {
elements: {
arc: {
borderWidth: 0
}
}
}
and also:
data: {
datasets: [{
data: [male_data , female_data],
backgroundColor: pieColors1,
borderWidth: [10, 0, 0, 0, 0]
}]
},
but this is what im getting:
I guess you have to create your own color image (Solid color with white strip on top) and pass it in as a canvas image.
Below is a modified example I've made based on the sample given from the chart.js documentation and a random picture found on the net.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var img = new Image();
img.src = 'http://www.worktop-express.co.uk/media/gbu0/metro-tiles-white-sparkle-worktops-100717.jpg';
img.onload = function() {
var ctx = document.getElementById("myChart").getContext('2d');
var fillPattern = ctx.createPattern(img, 'repeat');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 10)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
fillPattern
],
borderColor: [
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)'
],
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var img = new Image();
img.src = 'http://www.worktop-express.co.uk/media/gbu0/metro-tiles-white-sparkle-worktops-100717.jpg';
img.onload = function() {
var ctx = document.getElementById("myChart").getContext('2d');
var fillPattern = ctx.createPattern(img, 'repeat');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 10)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
fillPattern
],
borderColor: [
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)',
'rgba(0,0,0,100)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
</script>
Related
How make border radius for chart area chart.js
I need to make a border radius of 16px for the chart area
Maybe there is a plugin?
I am using chart.js V3.7.
I am using chart.js V3.7
How make border radius for chart area chart.js
I need to make a border radius of 16px for the chart area
Maybe there is a plugin?
I am using chart.js V3.7.
const ctx = document.getElementById('myChart').getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 400)
gradient.addColorStop(0, 'rgba(244, 192, 56, 0.3)')
gradient.addColorStop(0.35, 'rgba(244, 192, 56, 0.3)')
gradient.addColorStop(1, 'rgba(244, 192, 56, 0)');
const plugin = {
id: 'background',
beforeDraw: (chart, args, opts) => {
if (!opts.color) {
return;
}
const {
ctx,
chartArea
} = chart;
ctx.fillStyle = opts.color;
ctx.fillRect(chartArea.left, chartArea.top, chartArea.width, chartArea.height)
}
};
Chart.register(plugin);
var config = {
type: 'line',
data: {
labels: [['05.08', '2021'], ['06.08', '2021'], ['07.08', '2021'], ['08.08', '2021'], ['09.08', '2021'], ['10.08', '2021'], ['11.08', '2021'], ['12.08', '2021'], ['13.08', '2021'], ['14.08', '2021'], ['15.08', '2021']],
datasets: [{
data: [130, 260, 240, 270, 249, 310, 295, 330, 247, 280, 265, 265,],
fill: true,
backgroundColor: gradient,
borderColor: [
'#F4C038',
],
borderWidth: 4,
pointRadius: 6,
pointBackgroundColor: '#272E3B',
pointHoverBorderColor: '#fff',
pointBorderWidth: 4,
pointHoverBorderWidth: 4,
}]
},
options: {
responsive: true,
tension: 0.25,
plugins: {
background: {
color: '#272E3B'
},
legend: {
display: false,
labels: {
font: {
size: 14,
family: "Rubik"
}
}
}
},
scales: {
y: {
grid: {
color: '#3D4554',
borderColor: '#3D4554',
tickColor: 'transparent',
},
ticks: {
padding: 38,
callback: function(value) {
return '$' + value;
},
color: "rgba(255, 255, 255, 0.5)",
font: {
size: 16,
family: "Rubik",
weight: 300
},
}
},
x: {
grid: {
color: '#3D4554',
borderColor: '#3D4554',
tickColor: 'transparent',
},
ticks: {
padding: 16,
color: "rgba(255, 255, 255, 0.5)",
font: {
size: 14,
family: "Rubik",
weight: 300
},
}
}
},
}
};
new Chart(ctx, config);
There is no plugin but you can write your own like so:
const plugin = {
id: 'border',
beforeDraw(chart, args, options) {
const {
ctx,
chartArea: {
left,
top,
width,
height
}
} = chart;
ctx.save();
ctx.strokeStyle = options.color;
ctx.lineWidth = options.width;
ctx.setLineDash(options.dash || []);
ctx.lineDashOffset = options.offset;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {
plugins: {
border: {
color: 'red',
width: 16
}
}
},
plugins: [plugin]
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
</body>
To add the border to the chart area in chart.js, we need to use the chartAreaBorder plugin
const chartAreaBorder = {
id: 'chartAreaBorder',
beforeDraw(chart, args, options) {
const {ctx, chartArea: {left, top, width, height}} = chart;
ctx.save();
ctx.strokeStyle = options.borderColor;
ctx.lineWidth = options.borderWidth;
ctx.setLineDash(options.borderDash || []);
ctx.lineDashOffset = options.borderDashOffset;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
Paste the above piece of code before creating your chart and
Then use the following code for creating your chart and border around it,
const ctx = document.getElementById('dynamic-chart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'Your_Chart_Type_Here',
data: {
labels:Your_Data_Here,
datasets: [{
label: 'Your Data Here',
data: 'Your_Data_Here,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
plugins:{
chartAreaBorder:{
borderColor:'red',
borderWidth:2,
borderDash:[5,5],
borderDashOffset:2,
}
}
}
},
plugins:[chartAreaBorder]
});
Result is as follow
This Code will give the border to chartArea. I hope this sorted out your problem.
I have a pie chart and I want to get the number/data of each section of pie chart when hovered upon. I have seen the implementation of this in version 2.9.x but in version 3.x it is not working. I have also tried doing this here:
var pieChartHome = new Chart(
"myChart",
{
type: 'doughnut',
data: {
labels: ['One', 'Two', 'Three'],
datasets: [{
data: [4, 5, 3],
backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(54, 162, 235, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(54, 162, 235)'],
hoverBackgroundColor: ['rgba(255, 99, 132, 0.4)', 'rgba(255, 159, 64, 0.4)', 'rgba(54, 162, 235, 0.4)'],
borderWidth: 1,
hoverBorderWidth: 3
}]
},
options: {
responsive:false,
plugins: {
legend: {
position:'right',
onHover: (evt, legendItem,legend) => {
const index = pieChartHome.data.labels.indexOf(legendItem.text);
const rect = pieChartHome.canvas.getBoundingClientRect();
const point = pieChartHome.getDatasetMeta(0).data[index].getCenterPoint();
const e = new MouseEvent('mousemove', {
clientX: rect.left + point.x,
clientY: rect.top + point.y
});
pieChartHome.canvas.dispatchEvent(e);
},
}
}
},
}
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div>
<canvas id="myChart"></canvas>
</div>
But this shows me flickering data and not something like this:
Chart.js - show tooltip when hovering on legend
You can set the tooltip via chart.js public methods itself:
var options = {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}]
},
options: {
plugins: {
legend: {
position: 'left',
onHover: (evt, item, legend) => {
const chart = legend.chart;
const tooltip = chart.tooltip;
const chartArea = chart.chartArea;
tooltip.setActiveElements([{
datasetIndex: 0,
index: item.index,
}], {
x: (chartArea.left + chartArea.right) / 2,
y: (chartArea.top + chartArea.bottom) / 2,
});
chart.update();
},
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>
I am setting the following default in Chartjs (v2.9.3) to alter the default look of my bar charts:
Chart.defaults.bar.scales.xAxes[0].categoryPercentage = .95;
This causes the following deprecation warnings:
bar chart: "scales.[x/y]Axes.categoryPercentage" is deprecated. Please use "dataset.categoryPercentage" instead
But I can't get that to work, amongst others I have tried:
Chart.defaults.bar.dataset.categoryPercentage = 1;
Chart.defaults.bar.datasets[0].categoryPercentage = 1;
Chart.defaults.global.bar.dataset.categoryPercentage = 1;
Chart.defaults.global.bar.datasets[0].categoryPercentage = 1;
Is there a good resource to find the right commands to set defaults? Unfortunately, the otherwise excellent documentation is very incomplete in this regard.
The above isn't the only default setting I am struggling with.
For example, the following doesn't do anything (even though Chart.defaults.global.hover.animationDuration = 50; works):
Chart.defaults.global.hover.mode = 'index';
Chart.defaults.global.hover.intersect = true;
The correct syntax for globally changing the bar categoryPercentage is the following:
Chart.defaults.global.datasets.bar.categoryPercentage = 0.95;
And here's a working sample:
Chart.defaults.global.datasets.bar.categoryPercentage = 0.95;
var canvas = document.getElementById('myChart');
var data = {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
label: "Occurrences",
data: [3, 5, 2, 4, 6],
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
borderWidth: 1
}]
};
var option = {
scales: {
yAxes:[{
ticks: {
beginAtZero: true
}
}]
}
};
var myBarChart = Chart.Bar(canvas, {
data:data,
options:option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
To find out about other valid options contained in Chart.defaults, simply log it to the console (console.log(Chart.defaults)) and search for the option name.
You don't need to set it globally, I actually recommend you to set it for each chart according to documentation.
var canvas = document.getElementById('myChart');
var data = {
labels: ["A", "B", "C", "D", "E"],
datasets: [{
label: "Occurrences",
data: [3, 5, 2, 4, 6],
fill: false,
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
borderWidth: 1
}]
};
var option = {
datasets: {
bar: {
categoryPercentage: 0.95
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
};
var myBarChart = Chart.Bar(canvas, {
data: data,
options: option
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
I try to create a website with a bar-chart on it. I like to use ChartJs.
There are some good examples, but I don't know how to visualise the data if the data is an array.
var myArray = [{
year: '2016',
value: 5
},
{
year: '2017',
value: 9
},
{
year: '2018',
value: 4
}
];
How do I loop throu myArray to create a bar chart like this one in the example?
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['2016', '2017', '2018'],
datasets: [{
label: '# of Votes',
data: [5, 9, 4],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Thanks for your help!
Best, Marius
You can map your array of objects, getting only the value you need.
I did it by var values = myArray.map((x) => x.value) and then using values as the value to the data property inside chart options.
For the labels, you can use the same logic, but with x.year.
Below code represents an example:
var myArray = [{
year: '2016',
value: 5
},
{
year: '2017',
value: 9
},
{
year: '2018',
value: 4
}
];
//FILTER THE VALUES
var values = myArray.map((x) => x.value)
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['2016', '2017', '2018'],
datasets: [{
label: '# of Votes',
data: values,
borderWidth: 1,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="300" height="150"></canvas>
If, for some reason (browser maybe), you cant use arrow functions, then go with:
var values = myArray.map(function(x) {return x.value})
I have two charts, First chart shows the breakup of Shirt sales.
Second is the comparison of Blue Shirt vs Blue Trouser sales.
I want to import the Blue Shirt value from the first Chart to Second chart.
Here is the Code with two charts:
var ctx = document.getElementById("myChart1").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'Shirts',
data: [10, 10, 15, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
}
});
var ctx = document.getElementById("myChart2").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Blue Shirts", "Blue Trousers"],
datasets: [{
label: 'Sales',
data: [10, 8],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
}
});
Here is the JSFiddle (https://jsfiddle.net/kingBethal/L8x790fn/15/).
I found this thread describing getting data from click events: Click events on Pie Charts in Chart.js
I made also made a new fiddle here where it logs a chart object containing the chart data on chart click: https://jsfiddle.net/btnL9d2a/16/
myChart1Canvas.onclick = function(evt) {
var activePoints = myChart.getElementsAtEvent(evt);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
// `chartData` will be an object in the format {'Labels' : Array, 'datasets' : Array}.
console.log(chartData);
}
};
chartData.datasets[0].data is an array of the clicked-on chart's data.