I have a line chart of which the data points are rounded, but I want it to be triangle. Is there any way to do this?
Here is my chart code:
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Sales Point',
data: salesData,
borderColor: bdrColor,
fill: false
}]
},
Thanks in advance.
Set pointStyle property to triangle for your dataset, like so :
...
datasets: [{
label: 'Sales Point',
data: salesData,
borderColor: bdrColor,
fill: false,
pointStyle: 'triangle'
}]
...
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'Sales Point',
data: [3, 1, 4, 2, 5],
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)',
fill: false,
pointRadius: 10,
pointStyle: 'triangle'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 1
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
Related
I am trying to create a stacked horizontal bar chart with an average line on each bar using the ChartJS library. I tried several times and searched on the Internet but I did not find out any satisfying answers. I appreciate your helping. Thanks.
Example:
.
In this example, the red line on each bar implies the average value of its group.
To create the stacked horizontal bar chart, please see
https://jsfiddle.net/lamtn862004/9wm1krqf/10/.
var data = {
labels: ["January", "February", "March"],
datasets: [
{
label: "Dogs",
backgroundColor: "rgba(237, 192, 169)",
data: [20, 10, 25],
stack: 1,
xAxisID: 'x-axis-0',
yAxisID: 'y-axis-0'
},
{
label: "Cats",
backgroundColor: "rgba(253, 234, 175)",
data: [70, 85, 65],
stack: 1,
xAxisID: 'x-axis-0',
yAxisID: 'y-axis-0'
},
{
label: "Birds",
backgroundColor: "rgba(179, 211, 200)",
data: [10, 5, 10],
stack: 1,
xAxisID: 'x-axis-0',
yAxisID: 'y-axis-0'
},
]
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: 'groupableHBar',
data: data,
options: {
scales: {
yAxes: [{
stacked: true,
type: 'category',
id: 'y-axis-0'
}],
xAxes: [{
stacked: true,
type: 'linear',
ticks: {
beginAtZero:true
},
gridLines: {
display: false,
drawTicks: true,
},
id: 'x-axis-0'
},
{
stacked: true,
position: 'top',
type: 'linear',
ticks: {
beginAtZero:true
},
id: 'x-axis-1',
gridLines: {
display: true,
drawTicks: true,
},
display: false
}]
}
}
});
Now, I want to add the average line to each bar (as shown in the image).
Also, do you know the other solutions with open-source libraries for doing this?
The lines can be drawn using floating bars tied to the separate axis y2. To do so, you need to add another dataset as follows (I don't exactly understand what values you want to display, hence I randomly chose 40, 65 and 55):
{
label: "Lines",
backgroundColor: "rgb(255, 0, 0)",
data: [40, 65, 55].map(v => [v - 0.3, v + 0.3]),
yAxisID: 'y2',
order: -1
}
Further you must define a new scales option as shown below:
y2: {
display: false
}
Please take a look at your amended runnable code and see how it works.
var data = {
labels: ["January", "February", "March"],
datasets: [{
label: "Dogs",
backgroundColor: "rgba(237, 192, 169)",
data: [20, 10, 25]
},
{
label: "Cats",
backgroundColor: "rgba(253, 234, 175)",
data: [70, 85, 65]
},
{
label: "Birds",
backgroundColor: "rgba(179, 211, 200)",
data: [10, 5, 10]
},
{
label: "Lines",
backgroundColor: "rgb(255, 0, 0)",
data: [40, 65, 55].map(v => [v - 0.3, v + 0.3]),
yAxisID: 'y2',
order: -1
}
]
};
new Chart('myChart', {
type: 'bar',
data: data,
options: {
indexAxis: 'y',
plugins: {
legend: {
display: false
}
},
scales: {
y: {
stacked: true,
grid: {
display: false
}
},
y2: {
display: false
},
x: {
stacked: true,
beginAtZero: true,
grid: {
display: false
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
I am trying to render a line graph with two datasets
My sample chart
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
borderColor: 'rgb(255, 99, 132)',
fill: false,
data: [9000, 9020, 9010, 9004, 9011, 9040, 9050]
},
{
label: 'My Second dataset',
borderColor: 'rgb(0, 99, 132)',
fill: false,
data: [1000, 1020, 1010, 1004, 1011, 1040, 1050]
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 10
}
}]
}
}
});
</script>
This is how it looks currently current result
This the graph will be easy to read if it has axis break like this
expected result
There is no build in way to do this. The best thing you can do is use a second Y axes and link the second dataset to the other axes.
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
yAxisID: 'first'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
yAxisID: 'second'
}
]
options: {
scales: {
yAxes: [{
id: 'first'
},{
id: 'second'
}]
}
}
I'm trying to make a line graph with a single stroke between each datapoint on the graph. There should be a small space between each side of the datapoint.
I see that the docs say to use borderDash but the strokes will run through my datapoints instead of only between. I looked for a way to add padding/margin around each datapoint but I don't see a way to do that.
Because of the borderDash limitation that you pointed out, I think the easiest way to get the desired effect is to use a combination of pointRadius, backgroundColor, pointBorderColor, and pointBorderWidth.
This works by creating a white border around each point that makes it looks like there's a gap.
For example:
backgroundColor: '#000',
pointRadius: 5,
pointBorderColor: '#fff',
pointBorderWidth: 3,
Here's what it looks like:
And here's a runnable snippet:
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
borderColor: '#000',
backgroundColor: '#000',
pointRadius: 5,
pointBorderColor: '#fff',
pointBorderWidth: 3,
lineTension: 0,
data: [6.06, 82.2, -22.11, 21.53, -21.47, 73.61, -53.75, -60.32, -30, 20, 22, 25],
label: 'Dataset',
fill: false,
}, ],
},
options: {
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false,
drawTicks: false
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: false,
drawTicks: false
}
}]
},
legend: {
display: false
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
</body>
I have tried to add different colors to the Y-axis but without success.
Is it possible to achive something like attached image shows?
In the chartjs-plugin-annotation plugin you can set the background but not scale colors.
Describing image
var config = {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset',
data: [1,2,3,4,5,6,7],
fill: false,
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Colored scale'
},
gridLines: { color: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)', 'rgba(0, 0, 255, 1)'] }
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
<!DOCTYPE html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
</head>
<body>
<div style="width:75%;"><canvas id="canvas"></canvas></div>
</body>
In case you want the colored rectangles spread over the entire chart, you can draw individual boxes of different background color using chartjs-plugin-annotation.js.
new Chart(document.getElementById('canvas'), {
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset',
data: [1, 2, 3, 4, 5, 6, 7],
fill: false,
backgroundColor: 'rgb(0, 0, 0)',
borderColor: 'rgb(0, 0, 0)'
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Colored scale'
}
}]
},
annotation: {
annotations: [{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
yMin: 4.5,
yMax: 8,
backgroundColor: "rgba(255, 0, 0, 1)",
borderWidth: 0
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
yMin: 3.5,
yMax: 4.5,
backgroundColor: "rgba(255, 165, 0, 1)",
borderWidth: 0
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-0",
yScaleID: "y-axis-0",
xMin: 0,
xMax: 100,
yMin: 0,
yMax: 3.5,
backgroundColor: "rgba(50, 250, 50, 1)",
borderWidth: 0
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="canvas" height="90">
You can draw individual boxes directly on the canvas using the Plugin Core API. The API offers a range of hooks that may be used for performing custom code.
In below code snippet, I use the beforeDraw hook to draw the rectangles of different background color each.
new Chart(document.getElementById('canvas'), {
type: 'line',
plugins: [{
beforeDraw: chart => {
var ctx = chart.chart.ctx;
var xAxis = chart.scales['x-axis-0'];
var yAxis = chart.scales['y-axis-0'];
ctx.save();
ctx.fillStyle = 'green';
ctx.beginPath();
var yGreen = yAxis.getPixelForValue(3.5);
ctx.fillRect(xAxis.left - 6, yGreen, 6, yAxis.bottom - yGreen);
ctx.stroke();
ctx.fillStyle = 'orange';
ctx.beginPath();
var yOrange = yAxis.getPixelForValue(4.5);
ctx.fillRect(xAxis.left - 6, yOrange, 6, yGreen - yOrange);
ctx.stroke();
ctx.fillStyle = 'red';
ctx.beginPath();
var yRed = yAxis.getPixelForValue(7);
ctx.fillRect(xAxis.left - 6, yRed, 6, yOrange- yRed);
ctx.stroke();
ctx.restore();
}
}],
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset',
data: [1, 2, 3, 4, 5, 6, 7],
fill: false
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
gridLines: {
tickMarkLength: 15
},
ticks: {
padding: 6
},
scaleLabel: {
display: true,
labelString: 'Colored scale'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90">
I use Chart.js to create the horizontal bar of my chart. At this point I have is what is the first image.
But I need to create a "BackgroundBar" with percentage, but I do not know how I can do it. Can someone help me?
This is my output right Now.
This is the chart I want..
My code snippet is like below..
var bar_ctx = document.getElementById('bar-chart').getContext('2d');
var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 250, 0);
purple_orange_gradient.addColorStop(0.0, 'rgb(237, 28, 36)');
purple_orange_gradient.addColorStop(0.25, 'rgb(228, 81, 173)');
purple_orange_gradient.addColorStop(0.5, 'rgb(194, 112, 215)');
purple_orange_gradient.addColorStop(0.75, 'rgb(158, 143, 239)');
purple_orange_gradient.addColorStop(1.0, 'rgb(106, 159, 247)');
var bar_chart = new Chart(bar_ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: [12, 19],
backgroundColor: purple_orange_gradient,
hoverBackgroundColor: purple_orange_gradient,
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
categorySpacing: 0,
barThickness: 20
}],
xAxes: [{
ticks: {
beginAtZero: true
//max:100
}
}]
}
}
});
<canvas id="bar-chart" width="300" height="125"></canvas>
This can be achieved using a ChartJS plugin called - chartjs-plugin-annotation.
DEMO
var bar_ctx = document.getElementById('bar-chart').getContext('2d');
var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 250, 0);
purple_orange_gradient.addColorStop(0.0, 'rgb(237, 28, 36)');
purple_orange_gradient.addColorStop(0.25, 'rgb(228, 81, 173)');
purple_orange_gradient.addColorStop(0.5, 'rgb(194, 112, 215)');
purple_orange_gradient.addColorStop(0.75, 'rgb(158, 143, 239)');
purple_orange_gradient.addColorStop(1.0, 'rgb(106, 159, 247)');
var bar_chart = new Chart(bar_ctx, {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue"],
datasets: [{
label: '# of Votes',
data: [12, 19],
backgroundColor: purple_orange_gradient,
hoverBackgroundColor: purple_orange_gradient,
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
categorySpacing: 0,
barThickness: 20
}],
xAxes: [{
ticks: {
beginAtZero: true
}
}]
},
annotation: {
annotations: [{
type: 'box',
drawTime: 'beforeDatasetsDraw',
id: 'bg-bar-1',
xScaleID: 'x-axis-0',
xMin: 0,
xMax: 10,
backgroundColor: '#7f7f7f',
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.min.js"></script>
<canvas id="bar-chart" width="300" height="125"></canvas>
To learn more about this plugin and it's use cases, refer here.