Originally I set the fill color for each point to be completely transparent. If I run my mouse over the graph, the points pop up. I want to hide all points so that the line graph is smooth.
You can achieve this by setting point's radius property in configuration options as follows:
var chartConfig = {
type: 'line',
options: {
elements: {
point:{
radius: 0
}
}
}
}
Tooltips for the points will also gone off.
You can set the pointRadius to zero.
var myChart = new Chart(
ctx, {
type: 'line',
data: {
labels: [...]
datasets: [
{
data: [...],
pointRadius: 0, # <<< Here.
}
]
},
options: {}
})
I had the same problem, but I wanted to keep the hover option active.
There is my solution:
const config = {
type: 'line',
data: {
datasets:[{
label: 'Température',
borderColor: 'rgb(255, 99, 132)',
data: tempE,
pointStyle: 'rect',
}]
},
options: {
elements:{
point:{
borderWidth: 0,
radius: 10,
backgroundColor: 'rgba(0,0,0,0)'
}
}
}
};
Related
I have a Chart.js Doughnut Chart with two datasets. The chart itself works great, but the legend doesn't display as I would expect.
The three colours of the first dataset get displayed correctly in the legend. But the second dataset is not referenced to the Doughnut at all. It just shows all the labels, but gets its colour from the first colour of the first dataset.
How can I have a proper legend for both datasets?
This is my code:
data = {
labels: ['Red', 'Blue', 'Yellow', 'Orange', 'Dings', 'Bums', 'Yada'],
datasets: [
{
data: [300, 50, 100],
borderWidth: 1,
backgroundColor: ['#CB4335', '#1F618D', '#F1C40F']
},
{
data: [345.56, 56.47, 987.12, 78.01],
borderWidth: 1,
backgroundColor: ['#ff5604', '#ff0000', '#00ff00', '#0000ff']
}
]
};
chartConfig = {
type: 'doughnut',
data: this.data,
options: {
responsive: true,
plugins: {
legend: {
onClick: this.handleClick,
onHover: this.handleHover,
onLeave: this.handleLeave
}
}
}
};
It can possible to set only one data in datasets?
Here example:
var barChartData = {
labels: ['1 Aug'],
datasets: [{
label: 'Sales',
borderWidth: 0,
data: [10],
borderWidth: 3
}]
};
If it possible then why can not data show me in a chart?
It is possible to set point: { radius: 1 } for one data value.
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var barChartData = {
labels: ['1 Aug'],
datasets: [{
label: 'Sales',
borderWidth: 0,
data: [10],
borderWidth: 3
}]
};
var myBar = new Chart(ctx, {
type: 'line',
data: barChartData,
options: {
elements: {
line: {
tension: 0.5
},
point: {
radius: 1
}
}
}
});
I've got a radar chartJs.
I cant figure out how to put inside the area a radial gradient.
When putting the current code, it only takes 1 color as background-color by default
current code:
let ctx = document.getElementById('chart-0').getContext("2d");
let gradient = ctx.createLinearGradient(0.000, 150.000, 300.000, 150.000);
// Add colors
gradient.addColorStop(0.035, 'rgba(234, 25, 78, 1.000)');
gradient.addColorStop(0.225, 'rgba(0, 8, 249, 1.000)');
gradient.addColorStop(0.983, 'rgba(42, 255, 0, 1.000)');
let data = {
backgroundColor: gradient,
labels: labelData,
datasets: [{
borderColor: presets.red,
data: [20,20,20,20,20],
label: labeldata
}]
};
const options = {
maintainAspectRatio: true,
spanGaps: false,
scale: {
pointLabels: {
fontSize: 14
}
},
elements: {
line: {
tension: 0.000001
}
},
legend: {
labels: {
fontSize: 16
}
}
};
chart = new Chart('chart-0', {
type: 'radar',
data: data,
options: options
});
Each dataset also should include backgroundColor property with assigned gradient values. I've created JSFiddle based on your code.
I was having some problem when trying to redraw chart on canvas using chart.js in Angular. Here is my HTML component:
<div class="form-group">
<select [(ngModel)]="timeMode" id="timeModeInput" class="browser-default custom-select" (change)="onTimeModeChange($event)">
<option value="all" selected>Yearly</option>
<option value="monthly">Monthly</option>
</select>
</div>
<canvas id="expenseTimelineCanvas"></canvas>
Upon dropdown select, I repopulate the chart:
if (chart != null) { chart.destroy(); chart.clear(); }
chart = new Chart(chartName, {
type: "line",
data: {
labels: labels,
datasets: [
{
data: chartData,
borderColor: lineColor,
fill: false,
borderWidth: 1,
borderDash: [10, 10],
pointBackgroundColor: "white",
pointBorderColor: lineColor,
pointRadius: 5
}
]
}
}
});
However, when I mouse over at certain part of the canvas, the old chart will be displayed. Any ideas on how to totally destroy the canvas before replotting on the same DOM element?
Thanks!
this happens because chartjs uses canvas and for redrawing you just have to destroy old drawing from the canvas.
when you make a new chart then you have to destroy the old chart.
but in angular you can also just reload the component to destroy the chart
your method
//this method
initChart(){
//this will generate chart you need
//before generating just destroy the old chart
}
second method
//in html file
<thisIsHTMLTagOfChartComponent *ngIf="showChart">
</thisIsHTMLTagOfChartComponent>
//in typescript
public showChart = false;
//this function will be called everytime you fetch the data from server
getChartData(){
this.showChart = false; //this will remove the component from the page
fetchData(uri)
.then(result => {
//do your stuff here
this.showChart = true // this will load the component in the page again
}
)
i prefer to not destroy your chart just change the value of it for e.g: in your change function just load a new chart definition in your same chart with new config, we have 2 different configs:
config = {
type: 'bar',
data: {
labels: dringlichkeiten.map(x => x.id),
datasets: [
{
label: 'My Bar Chart',
data: dringlichkeiten.map(x => x.value),
backgroundColor: ['red', 'green', 'yellow', 'blue', 'orange']
}
]
},
}
config2 = {
type: 'line',
data: {
datasets: [{
label: 'Höhenlinie',
backgroundColor: "rgba(255, 99, 132,0.4)",
borderColor: "rgb(255, 99, 132)",
fill: true,
data: [
{ x: 1, y: 2 },
{ x: 2500, y: 2.5 },
{ x: 3000, y: 5 },
{ x: 3400, y: 4.75 },
{ x: 3600, y: 4.75 },
{ x: 5200, y: 6 },
{ x: 6000, y: 9 },
{ x: 7100, y: 6 },
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Höhenlinie'
},
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
userCallback: function (tick) {
if (tick >= 1000) {
return (tick / 1000).toString() + 'km';
}
return tick.toString() + 'm';
}
},
scaleLabel: {
labelString: 'Länge',
display: true,
}
}],
yAxes: [{
type: 'linear',
ticks: {
userCallback: function (tick) {
return tick.toString() + 'm';
}
},
scaleLabel: {
labelString: 'Höhe',
display: true
}
}]
}
}
}
chart: Chart ;
in your change function just load a new config:
change(){
this.chart = new Chart('canvas', this.config2)
}
DEMO.
I'm trying to remove the stroke color from the legend generated by ChartJS, but I can't quite seem to understand what the documentation is telling me.
My current code looks like this:
legend: {
position: 'bottom',
labels: {
generateLabels: function() {
return {
strokeStyle: "black",
}
}
}
}
Though I have tried this:
generateLabels: {
strokeStyle: "black",
}
I'm setting the stroke style to "black" to see if I'm having any effect, but I'm not even sure if that's what I'm supposed to be doing. I would think I could set it to none.
Edit
Here is the code for my full object:
var ctx = $('#chart');
var data = {
labels: ["1","2","3","4","5","6","7"],
datasets: [{
data: [22,19,17,15,10,9,8],
backgroundColor: [
'#df4344',
'#fc9627',
'#fcd949',
'#d4d81e',
'#6dc7ba',
'#24a38e',
'#263a7e',
'#5050b2',
'#4f7ec1',
'#96afe2',
],
borderColor: ["black"],
borderWidth: 2
}]
};
var wheel = new Chart(ctx, {
type: "doughnut",
data: data,
options: {
maintainAspectRatio: false,
responsive: true,
tooltips: false,
cutoutPercentage: 60,
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chart"></canvas>
But now that I run it here, it seems to be working. So I'm not sure what's wrong anymore.
To remove the stroke from legend, you need to set borderWidth property to 0 for your dataset, like so ...
datasets: [{
borderWidth: 0,
...
}]
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = c.getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Statistics',
data: [3, 1, 2, 5, 4],
backgroundColor: 'rgba(0, 119, 204, 0.1)',
borderColor: 'rgba(0, 119, 204, 0.8)',
borderWidth: 0 //<-- set this
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="c"></canvas>