I want to get a line width of 10 on specific points in the chart.
I can get a line width of 10 but on all lines with the following code:
gridLines: {
display: true,
lineWidth: 10
},
Current chart:
Is it possible to add specific width on different gridlines
What i want:
Codepen:
https://codepen.io/flowwdelapro/pen/RwPMbvb
You have to use an array instead of a number.
lineWidth: [1,1,10,1,10]
The number are applied from left to right.
Related
Example of Stacked Y-Axes
I can't figure out a way in Chart.js to get the Y-Axes to stack like I have in the example picture.
When I keep the scales object simple like this:
scales: {
y: {
stacked: true,
title: {
display: true,
text: "Temperature (°C)",
}
},
x: {
type: "time",
time: {
tooltipFormat: "LTS",
unit: "hour",
},
title: {
display: true,
text: "Datetime",
},
}
},
I obviously get a single Y-Axis, but instead of scaling to the maximum of any of the datasets, it seems to add each dataset up (ex: Say max Temp from any set is 40 °C, if I have 6 datasets the Y Scale goes from 0 - 250)
Additive Y-Axis example
It does stack all of the lines nicely though so I'm really hoping there is a decent solution as the Y-Axis right now is not helpful to a viewer. Thanks for any help!
With help from the Chart.js Slack channel, the easiest and actually great looking solution was just to separate each dataset into their own chart with only the top most chart showing a legend, and only the bottom chart showing an X-Axis. All middle charts have the X-Axis and legend turned off.
Chart.js
it's straight to show gridlines https://jsfiddle.net/haingdc/bgarmz7k/14/
gridLines: {
lineWidth: 0,
}
So I need to display gridlines inside (or below) lines area like the below pic.
How can I hide gridlines outside?
I have a bootstrap modal that shows a plot of xy data between a max and min tolerance range. To show tolerances lines, I create two datasets for the min (30) and max (70) horizontal lines. To highlight the tolerance area, I create another two lines at the yAxes max and min plot range values. The issue I have is that when I use chart.scales['y-axis-0'] to get the yAxes range the values are not correctly updated. They just appear as 0 and 100. Strangely if I close and then reopen the modal the ranges are then correct. It seems that chartjs does an automatic calculation of the yAxes range, however, I am not able to get access to it. Is there a way to get access to the yAxes ranges just before the plot is drawn? Or, is there a better way to solve this problem than creating two lines at the top and bottom of the plot and filling up or down to them...?
var y_axis = chart.scales['y-axis-0'];
var y_tol_max = new Array(y.length).fill(70);
var y_tol_min = new Array(y.length).fill(30);
var y_axis_max = new Array(y.length).fill(y_axis.max);
var y_axis_min = new Array(y.length).fill(y_axis.min);
chart.data.datasets.push({ borderColor: '#ffe6e6', data: y_axis_max, fill: false, radius: 0 });
chart.data.datasets.push({ borderColor: '#ffe6e6', backgroundColor: '#ffe6e6', data: y_tol_max, fill: '-1', label: 'Danger', radius: 0 });
By default, Google Chart positioned horizontal axis ticks on the border line of Chart Area, which can be shown in this picture:
How can I set some kind of padding to chart area that will make it look like this:
I am using Google Charts https://google-developers.appspot.com/chart/.
I finally found the answer:
Since I am using Date Data Type format, the chart will act as Continuous Chart (https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart#Data_Format).
Continuous Chart has characteristics of having tick close to the edge of the chart. What I have to do is set the domainAxis.type option to 'category'. https://google-developers.appspot.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous
Here is the code of my chart using ChartKick (http://ankane.github.io/chartkick/):
<%= line_chart #daily_pageviews, library: { domainAxis: { type: "category" }, curveType: "none", height: "400px", colors: ["#ff9933"], chartArea: { backgroundColor: { stroke: "#ccc", strokeWidth: 1 } } } %>
Result:
I have created a Google Chart Line Chart. There are data points at the bottom that do not show up because the upper points are large.
Here's my visualization function:
function drawVisualization() {
var data = google.visualization.arrayToDataTable(#table#);
var ac = new google.visualization.LineChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Billing Trend for this Month: #date#',
isStacked: true,
width: 1200,
height: 1000,
vAxis: {title: "Amount"},
hAxis: {title: "Date"}
});
}
I've looked through the param list but cannot find the proper one to set.
I would like the lower data points to be discernible.
Has anyone had luck with trying to do that?
Thanks
You can set the vAxis.logScale option to true, which will change the axis scale from linear to logarithmic. Your smaller values should then be discernible. There are a few other methods you could try as well (changing the value used to draw the data while keeping the tooltips the same; using a panel chart that zooms in on lower values); see some examples here: http://jsfiddle.net/asgallant/b4yCL/