I have a dataset that has 1-2 entries per day and I don't want that many labels on the x-axis so I am going through them and only showing every 5th or 10nth one. My issue is I do want to show the label for each one in the tooltips. I have a second array or data with the original label set that I want to use for tooltips but can't seem to figure it out. I assume there should be a fairly simple solution for this.
Below is a simple example. I tried adding the cutom option on tooltips with the second dataset but no luck.
var labels = ["10-23-2017", "", "10-25-2017", ""];
var labels2 = ["10-23-2017", "10-24-2017", "10-25-2017", "10-26-2017"];
var chart = document.getElementById('chart').getContext('2d');
var myChart = new Chart(chart, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: labels,
datasets: [{
label: "Readings",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: data,
}]
},
// Configuration options go here
options: {
tooltip: [{
enabled: true,
custom: labels2
}]
}
});
Related
enter image description here
Above when I hover over the chart it highlights the section Im hovering over with a grey border. What can I do to remove this.
You can use the hoverBorderWidth property to remove the border on hover like this:
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
data: [//data here],
hoverBorderWidth: 0
]
},
options: options
});
So I've been trying to recreate the chart in the following image:
I'm using the cutoutPercentage property but it affects both doughnuts, in my case, I only want to change the thickness of the outer ring.
This is what I have now:
You can define the weight option on individual datasets to obtain the desired result.
weight: The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values.
Please take a look at below runnable code snippet and see how it works.
var pieChart = new Chart("myChart", {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow"],
datasets: [{
data: [300, 50, 100],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
weight: 0.2
}, {
data: [200, 100, 25],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
}]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
Currently, I have a graph, and I want it so that after 3 data points, the graph is a dotted line. (Attempting to do show current data + predictions on this graph)
Current Code
<canvas id="commands"></canvas>
<script>
var ctx = document.getElementById("commands");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["03/14","03/16","Today","Tommorow"],
datasets: [{
data: ["0","0","23","90"],
}],
},
});
</script>
I'd like it so that the line between 23-90 and any points after that is a dotted line, (this can be done for the whole graph by adding borderDash: [10,5], but I'd like it to work for only certain points.)
Update: I've found a fiddle which does this, https://jsfiddle.net/uwb8357r/, but as you can see the tooltips look really bad.
I'am writing an application for budget management and i am using angular-chart.js.
i want to use a dataset to override the initial data(mainly to add new data to the graph and give diffrent color for each bar,label etc.)and set label and colors according to the value of the data.
currently,i tried to do that hard coded but only the first value is being override.
here is the code i am using :
angular.module("app2", ["chart.js"]).controller("MixedChartCtrl",
function($scope) {
$scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
$scope.labels = ['', ''];
$scope.data = [65, 11];
$scope.datasetOverride = [
{
label: 'Override Series A',
borderWidth: 1,
type: 'bar',
data: [345]
},
{
label: "Bar chart1",
borderWidth: 1,
type: 'bar',
data: [45]
}
];
});
Hoping that yourquestion is, you want a fill color/label/something to each individual data (for each bar).
Above (your) code snippet is used when you have two data sets.
All these dataset properties will accept String when the same property value has to set for all data, and they will also accept Array[String] - when you want to set different property values for different data in the same dataset. (like below).
$scope.data = [65,11];
$scope.datasetOverride = [
{
label: ['something', 'otherthing'],
borderWidth: [1,2],
backgroundColor: ['#FF4242','#2291ff']
}
]
so now I understood that you might be adding dynamically data.
so you have to push data into DATASET something like this:
$scope.data.push(345);
So if you want to set different properties for these you need to push the properties (arrays).
$scope.datasetOverride[0][label].push('someother thing');
$scope.datasetOverride[0][borderWidth].push(2);
$scope.datesetOverride[0][backgroundColor].push('#46bfb8');
This will add a bar with new color/label/etc beside the previous bars.
I hope I understood your question and this will help.
I'm working with Chart.js and creating line charts. I can't seem to get rid of the line above every chart coordinate. See the picture below. Which setting do I need to change to get rid of them? Thanks.
Click me
Here is what the chart variable looks like
var chart = new Chart(chartx, {
type: 'line',
data: {
labels: labels,
datasets: [{
data: data,
fill: false,
borderColor: 'rgb(0,0,0)',
borderWidth: 1,
lineTension: 0,
pointStyle: 'dash'
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
animation: false,
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false
}]
},
legend: {
display: false,
}
},
});
This is because you put pointStyle: 'dash' in your dataset attributes.
See Chart.js doc about LineChart data structure (pointStyle is at the last row of the table) :
The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using drawImage.
You have to choose between the different options.
Note that there is no none option.
If you want to remove the point style, you can :
Set the pointRadius attribute of your dataset to 0 (like in this fiddle).
Import an image as stated in the second part of the blockquote, which is empty (like this one).