So I can display:none the labels ex. below with css, but my .ct-chart still has something on the left and bottom side of the chart ex. image below.
.ct-labels, .ct-grids {
display: none;
}
Ideally the blue chart is over to the left of the white module and down on the bottom, so that it matches with the div, it is positioned absolute, and the chart responsiveness is on. I am assuming the white space is created from the labels still existing in the DOM?
I would like to have the chart showing no white space on the left and bottom side. My .ct-chart css looks like this.
.ct-chart {
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 100%;
padding: 0;
z-index: -1;
}
If you don't want to have labels at all, no grid lines and remove all offsets and padding you can do so but it requires quite a bit of configuration:
var chart = new Chartist.Line('.ct-chart', {
labels: [1, 2, 3, 4],
series: [
[1, 4, 2, 5],
[2, 3, 1, 4]
]
}, {
showPoint: false,
showLine: false,
showArea: true,
fullWidth: true,
showLabel: false,
axisX: {
showGrid: false,
showLabel: false,
offset: 0
},
axisY: {
showGrid: false,
showLabel: false,
offset: 0
},
chartPadding: 0,
low: 0
});
http://jsbin.com/patela/1/edit?html,css,js,output
Yes, those are svg elements with x and y value offsets. See in the example here http://gionkunz.github.io/chartist-js/examples.html the elements in
< g class="ct-labels">< /g>
all have an x and y offset defined that move them away from the parent element. It would be pretty simple to override these values with d3 after the chart has loaded.
When I load the chart I like to check the chart width and the number of labels and if need be I either display the labels, only display every other label, or hide all the labels based on whether the labels fit. This code hides the labels:
setTimeout(function() {
$('.ct-chart').find('.ct-labels .ct-horizontal').remove();
}, 100);
Related
I am creating a linechart, with months on the x axis and values on the y axis. The issue is that when there is a single data point, there is no line drawn around it. I was able to draw a horizontal line using the annotations plugin but when the value is > 0 i dont know how to draw a line then, since it is supposed to be a curve.
export const optionsMap = () => ({
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
elements: {
topLabel: {}
},
layout: {
padding: {
top: 150,
right: 45,
left: 40,
bottom: 5,
}
},
plugins: {
centerText: false,
datalabels: false,
},
annotation: {
drawTime: 'beforeDatasetsDraw',
annotations: [
{
type: 'line',
scaleID: 'y-axis-0',
value: 0.01,
mode: "horizontal",
borderColor: "#347aeb",
borderWidth: 2,
backgroundColor: "rgba(255, 0, 0, 0.3)"
}
]
}
});
I have found a solution, hope this helps someone.
Basically we can add sample points around the single data point we have. I made a function which basically pads sample points in order to draw a line around it.
/**
*
* The data points needed to draw a chart around
* a single point.
*/
const padDataPoints = (data, padValue) => {
for (let i = 0; i < padValue; i++) {
data.push(0);
data.unshift(0);
}
}
This is a simple function which adds padding points on either side of the data point.
We can then make the points disappear in chart js, by making the pointRadius of all the padding points as zero.
I would like to have my chartist charts on my website with no padding from left or right. I am using chartPadding: 0 as advised on several websites, but that did not really help. There is still too much air from the left or right border.
Here is jsFiddle. Help would be great!
var chart = Chartist.Bar('.ct-chart', {
labels: ['1.58', '2.58', '4.58', '5.2', '3.1'],
series: [
[12, 9, 7, 8, 5],
[2, 1, 3.5, 7, 3],
[1, 3, 4, 5, 6]
]
}, {
showPoint: true,
showLine: true,
fullWidth: true,
showLabel: false,
axisX: {
showGrid: false,
showLabel: true,
offset: 50
},
axisY: {
showGrid: false,
showLabel: false,
offset: 0
},
chartPadding: 0,
low: 0
});
// Listening for draw events that get emitted by the Chartist chart
chart.on('draw', function(data) {
// If the draw event was triggered from drawing a point on the line chart
if(data.type === 'label' && data.axis === 'x') {
// We just offset the label X position to be in the middle between the current and next axis grid
data.element.attr({
dx: data.x + data.space / 2
});
}
});
<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<div class="ct-chart"></div>
You can put negative values to the chartPadding property, but that would not give you the effect you are aiming for.
As you render the chart in a normal div the default width value is set to 100%. What you can do as a work around is to restrict the width, so there is less space for the svg. This will affect the padding on the left/right.
Here the updated fiddle - https://jsfiddle.net/zeq3da7p/3/
I have a Flot graph setup with the following series config:
{
series: {
shadowSize: 0,
lines: {
// fill: true,
fillColor: { colors: [{ opacity: 0 }, { opacity: 0.5 }] }
}
}
}
Without fill set to true, I get this result which is the layout I want, which automatically sets the lower bound of the y axis to around the lowest data point value:
If I set fill to true, I get the gradient fill I want, but the y axis shoots down to zero:
Hoping this is just a quick config fix, also open to suggestions on a better title for this question.
Change your code to this:
series: {
shadowSize: 0,
lines: {
fill: true,
zero: false,
fillColor: { colors: [{ opacity: 0 }, { opacity: 0.5 }] }
}
}
From the documentation:
Area and bar charts normally start from zero, regardless of the data's range. This is because they convey information through size, and starting from a different value would distort their meaning. In cases where the fill is purely for decorative purposes, however, "zero" allows you to override this behavior. It defaults to true for filled lines and bars; setting it to false tells the series to use the same automatic scaling as an un-filled line.
Here I am getting gradient color at top of the chart area by reversing y-Axis. check the image below .
yAxis: {
reversed: true,
showFirstLabel: false,
showLastLabel: true
}
I don't want to reverse the y-Axis, if i am reversing the y-Axis my chart also reversed. I want the gradient color which is in top of the chart line without using this Reversed Y-axis. Suggest me to if any other options in highcharts.
Could any one help me to solve this.
I am working live random data. In this case only the area traveled by the data should get the gradient color , empty space other than the data in chat shouldn't get gradient color.
As per #DaMaxContent answer , the output will act like below image.
I don't want that gradient which filled in other area of the chart data. Could you please help me to resolve this.
The break down:
You can use gridZindex and backgroundColor/fillColor properties to
produce the desired effect. Only issue is that the grid has to be
displayed over graph. Here is the solution: DEMO
Here is the code behind it:
chart: {
type: 'area',
backgroundColor: { //<<--that is what you are using as fill color
linearGradient : {
x1: 0,
y1: 1,
x2: 0,
y2: 0
},
stops : [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
yAxis: {
reversed: false,
showFirstLabel: false,
showLastLabel: true,
gridZIndex: 1000 //<<--grid Z index is used to display grid lines over the graph instead of under it
},
series: [{
name: 'AAPL Stock Price',
data: data,
threshold: null,
fillColor : "#fff", //<<--fill color under the line to simulate effect
zIndex: 1000,
tooltip: {
valueDecimals: 2
}
}]
If you wish to get rid of the marginal color areas, you can get rid off the graphs margin with chart: { [... ,] margin: 0 [, ...] } and then use the container's padding as the graph margin.
more info:
highcharts styling guides:
http://www.highcharts.com/docs/chart-design-and-style/design-and-style
grid Z index:
http://www.java2s.com/Tutorials/highcharts/Example/Axis/Set_grid_line_z_index.htm
background color:
Changing HighCharts background color?
(alternative to bg color) plot background color (bg color of main plot only)
http://api.highcharts.com/highcharts#chart.plotBackgroundColor
How can I make a pie chart fill 100% of the divit is contained in? The div has a width of 198px and it's height is 152px.
Additionally I would like to have a linear-gradient effect inside each pie slice, can you advise on how to do that?
You can achieve the full height of the pie chart by setting the size attribute in the plotOptions of pie and removing margins, spacing and titles from the chart.
Code
chart: {
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
plotOptions: {
pie: {
size:'100%',
dataLabels: {
enabled: false
}
}
}
Example (updated the fiddle to point to version 2.2.4)
Here is an example demonstrating this.
As to the linear gradients, I don't know if they have been implemented yet, but here is an example showing radial gradients.
Radial gradients are also part of Highcharts 3.0 now, here is an example
Update
Looks like as of Highcharts 3.0, this is not possible anymore due to the chart auto-scaling within the plot area, an excerpt from their documentation:
size: The diameter of the pie relative to the plot area. Can be a percentage or pixel value. Pixel values are given as integers. The default behaviour (as of 3.0) is to scale to the plot area and give room for data labels within the plot area. As a consequence, the size of the pie may vary when points are updated and data labels more around. In that case it is best to set a fixed value, for example "75%". Defaults to .
in my opinion this should not be the case since dataLabels are disabled. should probably be logged as a bug
Update (Aug 2014)
As per Torstein's comment, this is indeed still possible. slicedOffset needs to be set to 0 in addition to the margins begin set. (example)
$(function () {
$('#container').highcharts({
title: null,
chart: {
type: 'pie',
margin: 0
},
plotOptions: {
pie: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
});
#container {
outline: 1px solid red;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500"></div>
my solutions; (for legend position margin-top error..)
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
height:'100%' // added...
},
plotOptions: {
pie: {
size:'100%',
height: '100%',
dataLabels: {
enabled: false
}
}
}