Develop Reference

Styling problems with Chart.Js

How can I add these styles to my graph? I'm having trouble finding it in the documentation for it, and the other forums aren't very helpful. I am using Flask for the backend, so that's why the data values look like that.
Labels on top of bars
Change font size on both axis
Set y scale as a fixed value (0,8)
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var options = {
scales: {
yAxes: [{
ticks: {
fontSize: 40
}
}]
}
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Lithium Battery', 'Other Mfg', 'Delivery', 'Tailpipe', 'Fuel Cycle', 'Disposal', 'Total'],
datasets: [{
label: 'ICEV CAR (MTCO2e/Year)',
labels: [
"{{data['battery_icev_car']}}",
"{{data['other_mfg_icev_car']}}",
"{{data['delivery_icev_car']}}",
"{{data['tailpipe_icev_car']}}",
"{{data['fuel_cycle_icev_car']}}",
"{{data['disposal_icev_car']}}",
"{{data['total_icev_car']}}"
],
data: [ /* errors are normal, fixes when server ru
[0, {{data['y1_icev']}}],
[{{data['y1_icev']}}, {{data['y2_icev']}}],
[{{data['y2_icev']}}, {{data['y3_icev']}}],
[{{data['y3_icev']}}, {{data['y4_icev']}}],
[{{data['y4_icev']}}, {{data['y5_icev']}}],
[{{data['y5_icev']}}, {{data['y6_icev']}}],
[0, {{data['y6_icev']}}]
],
backgroundColor: [
'rgba(0,0,0,0.9)'
],
borderColor: [
'rgba(0,0,0,1)'
],
borderWidth: 1,
borderSkipped: false
}]
},
options: {
responsive: true,
plugins: {
legend: {
labels: {
// This doesn't work on axis
font: {
size: 20
}
}
}
},
y: {
beginAtZero: true
}
}
});
</script> </script>

Since your config is not working I assume you are using V3, in which case the solution is as followed:
For point one you need to use an external plugin, you can write your own or use the datalabels plugin
For your second problem you need to style it as a font object as told in the documentation like so:
options: {
scales: {
y:{
ticks:{
font:{
size: 50
}
}
}
}
}
For your last part you can set the stepSize to 0.8

Chartjs-plugin-zoom plugin does not change x axis labels

I am working with the chart.js module in order to plot some data and am using the chartjs-plugin-zoom in order to enable zooming and panning however although the zooming works the labels on the x axis will not change for whatever reason.
I have seen similar questions but they all dealt with time series data and therefore the advice was unhelpful.
Here is the plot zoomed out:
and here is it zoomed in:
The key thing to notice is how the labels on the y axis have changed but the x axis labels have not changed. Here is the relevant config variable of the chart:
const config3 = {
type: 'line',
data: {
labels: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
datasets: [
{
label: "",
backgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16),
borderColor: '#0071BC',
data: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
fill: false,
borderWidth: 1,
},
],
},
options: {
responsive: true,
title: {
display: true,
text: 'Peak: -1.2188'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Frequency (Hz)'
},
ticks:{
autoSkip: true,
maxTicksLimit: 20
},
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Amplitude'
}
}],
},
plugins:{
zoom: {
pan: {
enabled: true,
mode: 'xy',
speed: 20,
threshold: 10,
},
zoom: {
enabled: true,
drag: false,
mode: "xy",
speed: 0.1,
// sensitivity: 0.1,
}
}
},
elements: {
point:{
radius: 0
}
}
}
};
If needed I can provide more code but I imagine the mistake is probably contained in the config. I tried changing zoom.mode to be 'x' but that did not work.

In case someone else comes along this I figured out a solution that is pretty unintuitive.
The first problem is the way that labels are dealt with in chart.js and because they are treated as categories not x data the way that I thought they were. Therfore first you must pass your data in as coordinates in this format:
(as shown in this documentation: https://www.chartjs.org/docs/latest/charts/line.html)
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]
And delete the labels variable.
However this will not work with line charts despite what the documentation says. To get around this you can set: type: 'scatter' and inside the dataset write showLine: true
This will generate a line plot where the x labels are auto generated and zooming will work perfectly.
I also think there was a performance boost which is a nice bonus.

Remove the vertical line in the chart js line chart

I am using Chart.js to generate maps and have customised it to a good extent. But I am not able to remove the vertical grid line no matter what. Has anyone come across a situation like this? Help much appreciated.
JavaScript
var ChartDataHome = {
labels: ["", "NOV", "DEC", "JAN", "FEB"],
datasets: [{
strokeColor: "rgba(255.255,255,1)",
pointColor: "rgba(159,209,154,1)",
pointStrokeColor: "rgba(255,255,255,1.00)",
data: [4.5, 8.8, 7.5, 9.5, 7.8, 9]
}]
};
var step = 2;
var max = 10;
var start = 0;
ChartOptionsHome = {
scaleLabel: "<%= value + ' K ' %>",
pointDot: false,
bezierCurve: false,
scaleOverride: true,
scaleSteps: 10,
scaleSteps: Math.ceil((max - start) / step),
scaleStepWidth: step,
scaleStartValue: start,
scaleShowGridLines: true,
scaleGridLineWidth: 0,
scaleGridLineColor: "rgba(0,0,0,0.1)",
datasetFill: false,
animation: true,
animationSteps: 60,
scaleFontColor: "#ffffff",
scaleFontSize: 14,
scaleLineColor: "rgba(255,255,255,1)",
datasetStrokeWidth: 6,
responsive: true,
}
if ($("#chartHome")[0]) {
DrawTheChart(ChartDataHome, ChartOptionsHome, "chartHome", "Line");
}

The following applies to Chart.js 2.*.
If you only have one x-axis, whether the vertical grid lines (that are related to this x-axis) are displayed or not, is specified by the boolean value of options.scales.xAxes[0].gridLines.display. To be more precise, the following chart options disable the display of vertical grid lines for the single x-axis case.
options : {
scales : {
xAxes : [ {
gridLines : {
display : false
}
} ]
}
}

There's a new global option that was released with the new version of Chart.js two days ago.
var options = {
scaleShowVerticalLines: false
}

The Above answers seem outdated since they did not work in ChartJs 3.4.1 (probably lower versions as well) for me.
You can now use the following:
options: {
scales: {
x: {
grid: {
display: false
}
},
}
}
It's self-explanatory, but to remove horizontal lines, you can replace the x with y.

options : {
scales: {
yAxes: [{
gridLines: {
lineWidth: 0,
color: "rgba(255,255,255,0)"
}
}]
}
};
Charts.js v2.0

try "scaleShowGridLines" : false,

I think you can seperate x and y axis.
axes: {
xaxis: {
ticks: ticks,
tickOptions: {showGridline:false}
},
yaxis: {
tickOptions: {showGridline:true}
}
}
Hope this can help you.

Simply write
options:{
grid:{
show: false
},
}
It will solve your problem

Flot Graph not plotting data

I a trying to plot some information using a flot graph but I can not get the values to appear on the graph. This code was part of a demo file included in a template and so i have modified it to plot the data rather than using a randomise for the values, i am getting no errors but the chart isn't working and was hoping somebody could point me in the right direction.
My code is here:
init: function()
{
// apply styling
charts.utility.applyStyle(this);
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: this.data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: this.data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
}
},
// lines chart with fill & without points
chart_lines_fill_nopoints:
{
// chart data
data:
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
},
// will hold the chart object
plot: null,
// chart options
options:
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
},

So, digging a bit, I see you are using javascript from here. Looking at a working example here, you've broken their code in the following ways:
1.) You no longer seem to have a parent charts object, so
charts.utility.applyStyle(this);
isn't going to work.
2.) The init function is part of the chart_lines_fill_nopoints object, in your cut/paste code it isn't anymore.
3.) In your sample code you never actually call the init function to draw the plot.
4.) In the options backgroundColor : { } is invalid for flot (maybe this is part of the missing charts.utility.applyStyle).
Taking all this into account here's a fiddle which makes this code work.
Generating flot plots with the above code feels unnecessarily convoluted. Perhaps it makes sense when using these templates, but if you just using this as an example of how to call flot it's not very straightforward.
Also, please next time you post a question, include all relevant information (like where you found this code and how you changed it). Taken out of context this code makes little sense.

This code is working
//Defining data for the chart
var data=
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
};
//Defining options for the chart
var options=
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}};
// shorthand for document.ready
$(function(){
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
});
Check out the working example here on jsfiddle.

Flot chart multiple axes are not configured properly

I am expecting pretty weird problem with flot v.0.7. I have multiple axes, configured like that:
var plotData = [
{ data: data1 },
{ data: data2, yaxis: 2 }];
var options = {
selection: { mode: "x" },
xaxis: { mode: "time" },
yaxis: [
{ min: 0 },
{
min: 0,
position: "right",
zoomRange: false,
alignTicksWithAxis: 1,
tickFormatter: formatter,
}
],
grid: { markings: weekendAreas },
zoom: { interactive: true },
grid: {
clickable: true,
hoverable: true,
borderWidth: 1,
},
legend: { show: false },
};
var plot = $jq.plot(container, plotData, options);
But what I get is that both Y series are located on the right (not only second Y series). There is no formatter for my second series tick. Y values can be less then zero, if zooming. If I don't use array type for yaxis and define it as it would only be one series, then everything works fine. What am I doing wrong?

Instead of yaxis: [ ... ], use yaxes: [ ... ].
See the section of the docs entitled Multiple Axes for more info.