Usually I should be able to add a fill just by adding the property to the dataset. But I cannot get it to work and I am also unable to find any similar info on it. Maybe there is a plugin missing?
const chartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
radius: 0,
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgb(75, 192, 192)',
tension: 0.1,
hoverOffset: 4,
data: [65, 59, 80, 81, 56, 55, 40],
fill: true
}]
}
My CartJS registration looks like this:
import {
Chart as ChartJS,
Title,
Tooltip,
LineElement,
LinearScale,
PointElement,
CategoryScale,
Plugin
} from 'chart.js'
import { useConstructionRiskStore } from '../../core/stores/constructionRiskStore'
ChartJS.register(
Title,
Tooltip,
LineElement,
LinearScale,
PointElement,
CategoryScale
)
Its propably just something stupid ... I know.
You have to import and register the Filler plugin for the fill to work when using treeshaking:
import {Chart, Filler} from 'chart.js'
Chart.register(Filler)
Related
I want to add fill to a line chart using the react-chartjs-2 package. I'm passing fill: true to the dataset but that doesn't work as expected. Any suggestions?
const data = {
labels,
datasets: [
{
label: "Balance",
data: history.balances.map((item) => item.balance),
fill: true,
borderColor: "rgba(190, 56, 242, 1)",
backgroundColor: "rgba(190, 56, 242, 1)",
tension: 0.3,
},
],
};
This is because you are using treeshaking and not importing/registering the filler plugin.
import {Chart, Filler} from 'chart.js';
Chart.register(Filler);
By default Chart.js will display the tool tip at the top of the bar for the bar type of charts.
I am trying to change the default position of the tooltip from the top to the center of the bar.
Which is some thing similar to as shown in the below image.
Appreciate help on this, Thank you.
You need to define a new tooltip position mode as follows:
Chart.Tooltip.positioners.middle = elements => {
let model = elements[0]._model;
return {
x: model.x,
y: (model.base + model.y) / 2
};
};
Further you have to define tooltips within the chart options as follows:
tooltips: {
position: 'middle', // must match the positioner function name defined above
yAlign: null, // to get rid of the pointer
xAlign: 'center'
}
Please take a look at below runnable code snippet and see how it works:
Chart.Tooltip.positioners.middle = elements => {
let model = elements[0]._model;
return {
x: model.x,
y: (model.base + model.y) / 2
};
};
new Chart(document.getElementById("chart"), {
type: "bar",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
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)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
borderWidth: 1
}]
},
options: {
tooltips: {
position: 'middle',
yAlign: null,
xAlign: 'center'
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="90"></canvas>
Display the resulting chart in full page mode if the tooltips don't show up in embedded mode.
See attached screenshot with an example with what I'm trying to do.
Basically I want to be able to add custom text on certain yAxis and xAxis lines.
You can use the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code snippet, I use the afterDraw hook to draw custom text on the canvas.
For positioning your text on x and y, you may use hard coded number of pixels or compute them using the Scale Interface (i.e. function getPixelForValue).
new Chart(document.getElementById('myChart'), {
type: 'bar',
plugins: {
afterDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
ctx.font = "18px Arial";
ctx.fillStyle = "red";
var x = (xAxis.getPixelForValue('May') + xAxis.getPixelForValue('June')) / 2;
ctx.fillText('My custom text here', x, yAxis.getPixelForValue(65));
ctx.fillText('Another custom text here', 30, 15);
ctx.restore();
}
},
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
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)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)'],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="110"></canvas>
I am building a line chart with different background colors between data points. When I break my dataset into the following the lineTension is lost and shows straight lines. How can I make the curves?
var data = {
labels: ["Jan", "Feb", "Mar", "Apr"],
datasets: [{
data: [73, 59, null, null],
backgroundColor: "rgba(233, 104, 92, 0.3)",
borderColor: "rgba(233, 104, 92, 0.3)",
pointRadius: 0,
lineTension: 0.4,
}, {
data: [null, 59, 70, null],
backgroundColor: "rgba(92, 193, 77, 0.3)",
borderColor: "rgba(92, 193, 77, 0.3)",
pointRadius: 0,
lineTension: 0.4
}, {
data: [null, null, 70, 55],
backgroundColor: "rgba(233, 104, 92, 0.3)",
borderColor: "rgba(233, 104, 92, 0.3)",
pointRadius: 0,
lineTension: 0.4
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var options = {
showTooltips: false,
}
var chart = new Chart(ctx).Line(data, options);
Linetension is actually working, but you're only show 2 datapoints for each dataset. You need 3 to show a curve.
Also, it seems like you're using an old version of ChartJs, the latest version uses the following syntax:
var chart = new Chart(ctx, { type: "line", data: data,options: options });
I need drill down functionality with chart.js and angular 8. I could get a basic pie chart work and need a drill down chart now. Below is my code.
export class PieChartComponent implements AfterViewInit {
PieChart=[];
constructor() { }
ngAfterViewInit() {
console.log(this.pieElementRef+"VIEW initialize");
this.PieChart = new Chart('pieElement', {
// The type of chart we want to create
type: 'pie',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {
}
});
}
public handleClick(event) {
// Console.log("text: "+event);
console.log(event);
}
}
html code:
<div class="chart">
<canvas id="pieElement" (click)="handleClick($event)"></canvas>
</div>
I could get a basic pie chart with above code. Now I want to handle click functionality to drill down child pie chart.