Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I looked at the mini bar chart on the Charts.js home page. I couldn't understand how to convert that to an interactive line chart. Where are the helper functions documented? How do I apply them to line charts?
Example
var myLineChart = new Chart(ctx).Line(data, options);
Data Structure
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
You can see the documentation from this link ChartJs-LineChart
Related
Is it possible to have a space after and before every data point?
Like in this image:
There exists a series of dataset properties that can be used to style the points. You could use the following ones to achieve what you're looking for.
pointBackgroundColor
pointRadius
pointBorderColor
pointBorderWidth
Please have a look at the following code snippet.
new Chart(document.getElementById("myChart"), {
type: "line",
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First Dataset",
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: "rgb(75, 192, 192)",
lineTension: 0.1,
pointBackgroundColor: "rgb(75, 192, 192)",
pointRadius: 8,
pointBorderColor: 'white',
pointBorderWidth: 8
}]
},
options: {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>
If you want the points to also look the same when the mouse pointer hovers
over them, you'll have to define the following properties with identical values.
pointHoverBackgroundColor
pointHoverRadius
pointHoverBorderColor
pointHoverBorderWidth
I would like to change font size and border colors for this chart. Hence I don't know how to do it, I tried to put these options at different places but nothing seems to work. I can't get the logic of the binding between angular-chart options and Chart.js options, is there a common way to manipulate them?
Here's the directive:
<canvas class="chart chart-line" chart-y-axes="axes" chart-data="data" chart-labels="labels"
chart-series="series" chart-options="options" chart-legend="true" chart-colours="colours"></canvas>
Here are the scope definitions:
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.axes = ["y-axis-1", "y-axis-2"];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.colours = [{
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,0.8)'
}]
$scope.options = {
datasetFill: false,
showLines: true,
elements:
{
line:
{
fill: false,
tension: 0.0001
},
point:
{
radius: 0
}
},
scales:
{
yAxes: [
{
type:"linear",
id:$scope.axes[0],
gridLines:
{
display: false
}
},
{
type:"linear",
id:$scope.axes[1],
position: "right",
gridLines:
{
display: false
},
scaleLabel:
{
display: true
}
}]
},
};
Changing the colors through chart-colors just doesn't work.
Since you have 2 series, make sure you have 2 entries in $scope.colours i.e.
...
$scope.colours = [{
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'red',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,0.8)'
}, {
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'blue',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,0.8)'
}]
...
Fiddle - http://jsfiddle.net/cpdh1g19/ (the color for the first line will change after 2 seconds)
By the look of the options, you're using chart.js 2.0, you need to use the latest angular-chart.js.
Note the attribute is now chart-colors and the color properties have changed in chart.js 2.0.
Can you please guide me how to change the Y - AXIS value in Chartjs.
Kindly provide step by step procedure to change.
Is this what you are looking for?
var data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [
{
label: "My First dataset",
fillColor: "#FFC069",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#FF9C85",
data: [45, 39, 40, 31, 26, 45, 10, 36, 25, 30, 2, 10]
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, {
// adjusting your scale labels
scaleLabel: "<%=value/10%>M",
// adjusting your scale
scaleOverride: true,
scaleSteps: 5,
scaleStepWidth: 10,
scaleStartValue: 0,
// ajusting tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value / 10 %>M",
});
Fiddle - http://jsfiddle.net/t0o07xbf/
you can add this properties into your code:
scaleOverride : true,
scaleSteps : 5,
scaleStepWidth : 5,
scaleStartValue : 0,
I am using chart.js .Bar() charts.
However, on some conditions there may be no data in the system. Short of creating empty (dummy) datasets, can I somehow make chartjs draw an empty plot?
Edit: I edited the post to show horizontal lines of an empty graph as #zazu asked for it
In this sample, I set up a Chart.js line graph, providing a first dataset with data (in order to scale the grid vertical axis and make the horizontal lines visible), and a second one with empty data. This results in an empty graph, but with the full grid visible:
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
// invisible dataset
{
label: "",
fillColor: "rgba(220,220,220,0.0)",
strokeColor: "rgba(220,220,220,0)",
pointColor: "rgba(220,220,220,0)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
// change this data values according to the vertical scale
// you are looking for
data: [65, 59, 80, 81, 56, 55, 40]
},
// your real chart here
{
label: "My dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: []
}
]
};
var options = {
animation: false,
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
showTooltips: false
};
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
JSFiddle here.
I'm having a tough time figuring out how to get labels, legend and title showing up in my Chart JS Line Chart. I've copied the code directly from the example (reproduced below). However, the label "My First dataset" doesn't show up anywhere on the chart and so I can't tell which line is which. I've also tried adding a 'title' to my datasets, but with no luck. Anyone know what I'm missing?
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]};
Thanks,
Saswat
in the option add this parameter
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"