guys, how can i change opacity in line chart?? Look at my chart:
red, gray, and blue background. I need make it 100% invisible.
Here is my code:
<canvas id="line" class="chart chart-line" chart-data="data2" chart-labels="labels2" chart-series="series2" chart-options="options2"
chart-dataset-override="datasetOverride2" chart-click="onClick" chart-colours="colours">
</canvas>
And fragment of JS:
$scope.rysujWykres2 = function (daneX, daneY, daneZ, daneA) { //metoda rysująca wykres
$scope.labels2 = daneX;
$scope.series2 = ['Ur', 'Ul', 'Uz'];
$scope.data2 = [
daneY,
daneZ,
daneA
];
$scope.datasetOverride2 = [{ yAxisID: 'y-axis-1' }];
$scope.options2 = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
}
]
},
elements: {
point: {
radius: 1
}
},
colours: [{
fillColor: 'rgba(47, 132, 71, 0.8)',
strokeColor: 'rgba(47, 132, 71, 0.8)',
highlightFill: 'rgba(47, 132, 71, 0.8)',
highlightStroke: 'rgba(47, 132, 71, 0.8)'
}]
};
}
but it doesnt work. Can u help me off this colours? I need only lines.
If you do not want to see the fill under the line, then set the fill property to false (this is part of a line chart dataset configuration). I'm not exactly sure how to do this in angular chart.js, but it looks like you could add it to your datasetOverride2 object.
$scope.datasetOverride2 = [{fill: false}, {fill: false}, {fill: false}];
If this doesn't work then you need to use the property wherever you define each dataset.
My friend,
$scope.datasetOverride2 = [{
yAxisID: 'y-axis-1',
fill: false,
}];
work but only for blue color date, look:
aww, its so easy. Look:
Solution:
$scope.datasetOverride2 = [{fill: false},{fill: false},{fill: false}];
Thanks guys for help. We did it!
Related
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>
Is it possible to customise the colour of each bar in a column chart ?
This is the kind of data I'm having using React:
const [data, setData] = useState([{
data: [{
x: 'Apple',
y: 54,
color: '#CCCCCC'
}, {
x: 'Orange',
y: 66,
color: '#FF0000'
}]
}]);
But the colours here is are not applied to the chart.
I've tried with the 'distributed' option set to true as well.
plotOptions: {
bar: {
distributed: true,
},
},
There are two ways to achieve this, you're very close to both of them.
1. Pass the color with the data
Very similar to what you've tried, but use fillColor as the key instead.
data: [{
x: 'Apple',
y: 54,
fillColor: '#CCCCCC'
}, {
x: 'Orange',
y: 66,
fillColor: '#FF0000'
}]
2. distributed option
For this to work, it needs to be nested inside the options object:
options: {
plotOptions: {
bar: {
distributed: true
}
}
},
If this doesn't work, it's worth making sure that there aren't any invalid attributes (e.g. color) somewhere that might be causing issues.
As I'm sure you've already discovered, there are some examples of various ways to use colors in a column chart in the ApexCharts docs.
I'd like to conditionally add a strikethrough to tick labels. As far as I can tell, there's no option to natively do that through Chart.js. Is there a way to hook in through the axes callbacks to add that?
I don't know if that is possible because you are dealing with a canvas element, but you can customize the text in the labels by using the ticks callback as in this example:
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["One", "Two", "Three", "Four", "Five"],
datasets: [
{
label: "A chart",
backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
data: [2478, 5267, 734, 784, 433]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'A chart with columns and custom vertical labels'
},
scales: {
yAxes: [{
ticks: {
callback: function (value, index, values) {
return index % 2 == 0 ? value : '**' + value + '**';
}
}
}]
}
}
});
Note the callback funcion there, maybe you can use this to give some labels a distinctive text.
The chart of this example looks like this:
I wrote in the mounted function:
this.gradient = this.$refs.canvas[0].$el.childNodes[0]
.getContext('2d')
.createLinearGradient(0, 0, 0, 450)
this.gradient.addColorStop(0, '#F44336')
this.gradient.addColorStop(0.3, '#F50057')
this.gradient.addColorStop(0.6, '#FF4081')
this.gradient.addColorStop(1, '#FF9100')
and in the function where I set the values for the charts:
datasets: [
{
label: service.name,
backgroundColor: this.gradient,
responsive: true,
data: service.statusdatavalue
}
]
There are no Console Errors nor others.
The result is always the same:
Any ideas?
Thank you.
I made the gradient the way below.
datasets: [{
label: service.name,
backgroundColor: this.gradient,
responsive: true,
data: service.statusdatavalue,
fill: true. // here!
}]
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,
}];
});