I would like to create an Polar Area Chart with equal size sections (not based on the actual value) like this with ng2-charts: Example
I thought that using the scales.r.max setting at 1 will create the effect I need, but any data that exceeds the max value overflow outside the bound of the chart instead of clipping it.
Does anybody have an idea how to achieve this?
Thanks in advance for your help,
I think you don't need a polar area but a pie chart should fit better the picture you posted.
You could define a data array with all the same value "1 / labels.length" where labels are the months of the posted picture.
Then you should use Datalabels plugin in order to set the real number to show in the chart.
const labels = ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'];
const data = [65, 8, 90, 81, 56, 55, 40];
const value = 1 / labels.length;
const colors = [
'rgb(53, 152, 219)',
'rgb(46, 204, 113)',
'rgb(155, 89, 182)',
'rgb(241, 196, 15)',
'rgb(189, 195, 199)',
'rgb(203, 184, 214)',
'rgb(216, 252, 207)'
];
const ctx = document.getElementById("myChart");
const polarChart = new Chart(ctx, {
type: 'pie',
plugins: [ChartDataLabels],
data: {
labels: labels,
datasets: [{
data: labels.concat().fill(value),
backgroundColor: colors,
}]
},
options: {
plugins: {
legend: {
position: 'right'
},
datalabels: {
color: 'black',
font: {
size: 24,
weight: 'bold'
},
formatter: (value, context) => data[context.dataIndex]
}
},
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.1.0/dist/chartjs-plugin-datalabels.min.js"></script>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
Related
js code :
its to add chart to col-4 bar must have 3 columns each having space between it all different color, remove legend in this google chart
function drawBarChart() {
var data = google.visualization.arrayToDataTable([
["Retention", "Level", {
role: "style"
}],
["HIGH", 12, "#E54B4B"],
["ELEVATED", 29, "#FFB100"],
["LOW", 52, "#2BC18D"],
]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
height: 600,
width: 370,
legend: 'none',
bar: {
groupWidth: "55%"
},
ticks: [0, 20, 40, 60, 80, 100],
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_divTwo'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(data, options));
};
chart js makes a common gradient for all elements:
enter image description here
I need this:
enter image description here
It's a bit tricky because, using to backgroundColor scriptable option (callback), this is invoked before the element dimension is completely calculated (as far as I have seen, maybe I'm wrong). Anyway, by a workaround, it could be something like in the snippet.
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
data: [50, 35, 45, 47, 21, 13, 27],
borderWidth: 0,
backgroundColor(context) {
const {chart, datasetIndex, index} = context;
const ds = chart.data.datasets[datasetIndex];
const value = ds.data[index];
const y = chart.scales.y.getPixelForValue(value);
const meta = chart.getDatasetMeta(datasetIndex);
const data = meta.data[index];
const {x, width, base} = data;
if (x) {
const ctx = chart.ctx;
const gradient = ctx.createLinearGradient(x, y, x + width, base);
gradient.addColorStop(0, 'green');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'red');
return gradient;
}
}
}]
},
options: {
plugins: {
legend: false
}
}
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.9.1/dist/chart.min.js"></script>
<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"/>
</div>
</body>
</html>
I'm trying to create a chart.js scatter plot with a set of points with values of 0 to 100 percent. I'd like to have 0 be a red point and 100 be blue and have a gradient between the two. I'm able to get the colors I want, but is it possible to get labels for just a few points like 0, 25, 50, 75, and 100? I don't want a label for all 101 possible values just enough for users to understand that it's a spectrum.
I considered trying to add two datasets to the chart one for the real data with no labels and another with not data but the five labels I want. Would this work?
Yes, you can specify the ticks you want with the afterBuildTicks hook. You can also specify the count property in the ticks this will make it so chart.js generates that many ticks but you dont have control over the values of those ticks:
const data = [];
for (let i = 0; i < 100; i++) {
data.push({
x: i,
y: i
})
}
const options = {
type: 'scatter',
data: {
datasets: [{
label: '# of Votes',
data: data,
borderColor: 'orange',
backgroundColor: 'orange'
}]
},
options: {
scales: {
x: {
afterBuildTicks: (a) => (a.ticks = [{
value: 0
}, {
value: 25
}, {
value: 50
}, {
value: 75
}, {
value: 100
}]),
ticks: {
count: 5, // limit to 4 ticks but let chart.js decide what tose ticks are
}
}
}
}
}
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.1/chart.js"></script>
</body>
I have a ChartJS v2 bubble chart with multiple datasets where I want to represent certain data points with different shaped elements.
I've read about point configuration options for pointStyle so the element points can be different shapes, other than circles.
I've tried a few variations and places to add pointStyle but I can't get it working. I only ever see circles.
Is this even possible with a bubble chart?
If not is it possible with a scatter chart?
If anyone still needs to know this. You can put it in the dataset itself to apply only to that dataset, in options.datasets.bubble to make it apply to all bubble datasets, in options.elements.point to apply it to all point elements or in the root of the options to apply it to the whole chart:
const image = new Image()
image.src = 'https://www.chartjs.org/docs/master/favicon.ico';
const options = {
type: 'bubble',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 20,
y: 30,
r: 15
}, {
x: 40,
y: 10,
r: 10
},
{
x: 30,
y: 22,
r: 25
}
],
pointStyle: (ctx) => (ctx.dataIndex === 2 ? image : 'rectRot'),
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)'
}]
},
options: {
pointStyle: (ctx) => (ctx.dataIndex === 2 ? image : 'rectRot'),
elements: {
point: {
pointStyle: (ctx) => (ctx.dataIndex === 2 ? image : 'rectRot')
}
},
datasets: {
bubble: {
pointStyle: (ctx) => (ctx.dataIndex === 2 ? image : 'rectRot')
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
image.onload = () => new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
To the pointStyle you can pass either a canvas element, image or one of the following strings:
'circle'
'cross'
'crossRot'
'dash'
'line'
'rect'
'rectRounded'
'rectRot'
'star'
'triangle'
Using chart.js v2, is it possible to mark a dataset in a line chart as being disabled on initial load?
Didn't find an option for it in the documentation.
Yes, there is a "hidden" flag in ChartJS.
eg.
data:
{
datasets: [
{
data: [1,2,3],
label: 'My First Dataset',
hidden: true,
},
],
}
See this issue on GitHub: https://github.com/chartjs/Chart.js/issues/689
The accepted solution has the downside, that hiding/unhiding signals might sometimes fail after initializing the chart like that.
It might be a better idea to change it in the current metadata of the dataSet, which holds the actual data that is used by the chart:
chart.data.datasets.forEach((dataSet, i) => {
var meta = chart.getDatasetMeta(i);
meta.hidden = (<your-condition-here>);
});
this.chart.update();
If you are using angular-chartjs, then you can add the properties of the dataset in the chart-dataset-override property:
For example:
HTML:
<div class="container" ng-app="app" ng-controller="ChartCtrl">
<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series" chart-dataset-override="datasetOverride">
</canvas>
</div>
Javascript:
Chart.defaults.global.legend.display = true;
angular.module("app", ["chart.js"])
.controller("ChartCtrl", function($scope) {
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.datasetOverride = [{}, {
hidden: true,
}];
});