I am building a line chart using ChartJS. I want to increase the spacing between the vertical tick marks on the Y-Axis. Here is a slice of the relevant options being passed to ChartJS. Is there a property in the ticks section that will allow me to increase the spacing between the ticks, thereby increasing the total height of the chart canvas?
lineChartOptions = {
scales: {
yAxes: [
{
id: 'y-axis-0',
position: 'left',
ticks: {
... // <-- WHAT OPTION GOES HERE?
}
},
Note: It is not an option to simply decrease the height of the canvas using CSS, the canvas stretches to fill the space thereby distorting the chart.
If not much different data you can use this to set range
//EXAMPLE DATA [533,743,612,983]
ticks: {
beginAtZero: false,
stepSize: 100,
max: 1000
min: 500
}
Related
I am using a solidgauge chart from highcharts and appear to have scaling issues.
The basic issue is that I want to define a chart that can be resized and expect the graph to adjust to fit the space in the best way.
But sometimes the chart extends outside the container and sometimes the chart is smaller than it needs to be.
A test is in jsFiddle here.
That test shows various versions of the chart:
Chart test [A] = pane.size = 100% / container size = 400px x 400px.
Chart test [B] = pane.size = 140% / container size = 400px x 400px.
Chart test [C] = pane.size = 100% / container size = 400px x 300px.
Chart test [D] = pane.size = 140% / container size = 400px x 300px.
The main chart options used are these:
{
chart: {
type: 'solidgauge'
},
credits: false,
title: {
text: 'Solid Gauge'
},
yAxis: {
minorTickInterval: null,
min: 0,
max: 100
},
pane: {
center: ['50%', '85%'],
size: '140%', // ISSUE: problem scaling chart outside container
//size: '100%', // ISSUE: problem with gap above gauge
startAngle: -90,
endAngle: 90,
background: {
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
decimalPlaces: 1,
units: 'rpm',
borderWidth: 0,
useHTML: true,
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
('black') + '">{point.y:.11f}</span><br/>' +
'<span style="font-size:12px;color:silver">rpm</span></div>'
}
}
},
tooltip: {
enabled: false
}
};
Chart [A] is OK, but if I use the same pane size (100%) and reduce the height (to 300px) to remove the gap between the title and the chart then I get [C] where the chart has been scaled down too small.
Similarly, chart [D] is OK, but if I use the same pane size (140%) and increase the height (to 400px) then the graph extends outside the container as shown in [B].
Are there any options that I am missing that can be used to fix this problem, or am I going to have to dynamically adjust the chart based on container size (which I want to avoid) ?
As you can read on highcharts forum here: https://www.highcharts.com/forum/viewtopic.php?t=33070
Solid gauge is created from angular gauge. The background is one of
key elements that make the chart look like arc shaped solid gauge. If
you disable it you will see that options used for inner radius and
outer radius as well as size or center of pane are calculated for
circle, but the arc is used for visualization.
So, remove the startAngle and endAngle to see how the chart is scaled. As you can notice it is scaled as circle and arc is used only for visualization. That's why it is acting so strange, due to solid gauge architecture.
Demo:
https://jsfiddle.net/BlackLabel/mtevb2d3/
I'm using Chart.js v1.0.1-beta.3. I'm creating an interactive bar chart where users can click on a bar to increase the value of that bar.
By default, the histogram begins with empty values. The y-axis in that case defaults to a [0,1] scale. When users start adding data to the histogram, the y-axis maximum changes to adjust, which causes a jarring shift in the appearance of the graph at low values.
I'd like to have the y-axis default to, say, a [0,10] scale even when no data is entered. This StackOverflow question is the most relevant info I can find on how to address problems like this; the best solution on that page is to use the 'suggestedMax' parameter in the chart options:
scales: {
yAxes: [{
ticks: {
suggestedMax : 10
}
}]
},
although this might apply only to v2+ of the library, it's hard to tell. In any event, this doesn't work, and the y-axis defaults to [1,0] when there's no data. I've also tried every combination of every other suggestion on that page, including
using scaleOverride : true, display : true, setting explicit min and max parameters within 'ticks', scaleBeginsAtZero : true, beginAtZero : true, and scaleStartValue : 0,
If I try to upgrade to the most current release, v2.7.3, the charts don't appear on the rendered page at all. I don't have the time or inclination to debug what's happening there, so I'm stuck with v1.0.1.
How do I have a bar chart default to a suggested maximum in this version? Is it even possible?
Looking through the documentation included with v1.0.1 (zip file), there doesn't appear to be a way to do this. I can't see any option to set the scale values.
In v2.7.3 this is quite simple. A working example is below. The chart starts empty, with a y-axis scale from 0-10. Clicking 'Add Series' adds a new bar with a value of 5. Clicking a bar increments value by 1.
let btn1 = document.getElementById('add'),
canvas = document.getElementById('chart'),
chart = new Chart(canvas, {
type: 'bar',
data: {
labels: [],
datasets: []
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
suggestedMax: 10
}
}]
}
}
});
canvas.addEventListener('click', function(e) {
let idx = chart.getDatasetAtEvent(e)[0]._datasetIndex;
chart.config.data.datasets[idx].data[0]++;
chart.update();
});
btn1.addEventListener('click', function() {
chart.config.data.datasets.push({
data: [5]
});
chart.update();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<button id="add">Add Series</button> Click a bar to increment its value by 1.
<canvas id="chart"></canvas>
By default, JSXGraph's board renders with a grid in the background. When I instantiate it with the option axis: false, the grid disappears, but so do the axis labels and tickmarks.
Messing with JXG.Options like this doesn't seem to do anything:
JXG.Options.grid.strokeColor = '#ff0000';
JXG.Options.grid.strokeOpacity = 0;
The grid board option doesn't actually turn off the grid, just makes it behave differently on zoom, noted here.
Basically, making the board like this turns off the axis ticks and the grid for the Y axis:
var board = JXG.JSXGraph.initBoard(id, {
axis: true,
defaultAxes: {
y: { ticks: { visible: false } }
}
});
And changing visible to true makes the grid and the ticks visible.
How do I turn off just the background grid, leaving the axis labels intact?
Alright, I figured this out by looking at options.js in jsxgraph. The main grid is actually referred to as "ticks", closely related to the ticks on the axis line. In fact, it's drawn with the same piece of code I'm guessing. There's minorHeight and majorHeight for the ticks, referring to either ticks on the axis line or ticks on the entire background. minorHeight is 10 by default, and majorHeight is -1, a special case that means draw on the whole board. The solution is to change majorHeight so it draws like the minor ticks, just a little differently for clarity:
var board = JXG.JSXGraph.initBoard(id, {
axis: true,
defaultAxes: {
y: { ticks: { visible: true, majorHeight: 5 } }
}
});
When I create a simple column chart with at least 2 datapoints there is annoying spacing as you can see in the jsfiddle. The width of the spacing scales with the smallest distance between two datapoints. I can't find any other options besides the one I've already set (min, max, minRange) to prevent the spacing.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
tickInterval: 1,
min: 0,
max: 23,
minRange: 23
},
series: [{
data:[[0,10], [23,10]]
}]
});
});
http://jsfiddle.net/f5JUU/2/ (Big spacing)
http://jsfiddle.net/f5JUU/3/ (No spacing. This is how the other Jsfiddle should look like too...)
Not sure if you mean the spacing between the points, or the size of the points.
if the size, use pointRange:
http://jsfiddle.net/f5JUU/4/
pointRange:1
If you want the data to be like your 'big spacing' example, but the chart to look like your 'small spacing' example, then you just need to make your x axis max value much larger.
http://jsfiddle.net/f5JUU/5/
You can try to use groupPadding / pointPadding / pointWidth parameters and adapt columns correct with your expectations.
All parametsers are documented here: http://api.highcharts.com/highcharts
I am using highcharts to draw some charts. I use the basic line plot like this:
http://www.highcharts.com/demo/spline-irregular-time
How can I display the legend under the chart area instead of at the right?
http://www.highcharts.com/demo/column-stacked-percent
Thx
marginBottom can be used to put legend on bottom of chart. You can still use legend property to move legend for example in the middle or right(i used center).
chart: {
marginBottom: 100
},
legend: {
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 0
},
Possible solution: fiddle
Having the legend under the chart is the default, so you can omit the legend propery entirely. Bear in mind that to make this look nice, you'll have to add a little to the bottom margin, otherwise the chart and the legend will overlap.
chart: {
type: 'line',
marginRight: 130,
marginBottom: 70 // Increase this to 70 or so
},
// Remove the legend property completely
Here's a demonstration.