I'm working with nvd3 and I'm not much hands-on with its styling (css properties) to customize it. I have a line chart with two data lines on it.
The code for drawing the lines is following:
nv.addGraph(function() {
chart = nv.models.lineChart();
chart.margin({
left : 100,
bottom : 100
}).useInteractiveGuideline(true).showLegend(true).duration(250);
chart.xAxis.axisLabel("Date").tickFormat(function(d) {
var date = new Date(d);
return d3.time.format("%b-%e")(date);
});
chart.yAxis.axisLabel('').tickFormat(d3.format(',.2f'));
chart.showXAxis(true);
d3.select('#startupRiskLineChart').datum(
prepareDataObj(val1_y, val1_x, val2_y, val1_x))
.transition().call(chart);
;
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
Is there any way to fill the area under data line with a lighter color?
Any help would be highy apperiated.
To get a line chart with a filled area in a specific color:
Add area: true to the data series, as in this example.
Add this CSS: .nv-area { fill: red }
The opacity of the area is set to 0.5, so filling it with red will actually make it pink:
chart.color(["red","yellow","blue"]);
'#00FFFF','#0FF','cyan' all are valid ways to set colors
Another way is set it in data itself
[{
values:[{x:1,y:1},{x:2,y:4},{x:3,y:9},{x:4,y:16}],
key: 'not a Sine Wave',
color: '#ff7f0e' //color - optional: choose your own line color.
}]
duplicate question i guess
Add
classed: "my-custom-approx-line"
to config of specific line and add styling:
&.nv-area {
fill-opacity: 0.2;
}
As of commit #becd772
Use .nv-group{ fill-opacity: 1.0 !important; } to fill the area with the same color as the line
Related
I have created a HighChart in a Ag data grid cell. On hovering over the Line chart, I need to display a tooltip with few details. I am able to show the tooltip within the cell, but as the tooltip is displayed within the cell, the content gets hidden in the cell. I need to display the tooltip in such a way that it can overlap and display the tooltip over another cell.
I tried setting the z-index to 99999 & position as relative/absolute of highchart tooltip. But it does not reflect.
Tried to override the css class .highcharts-tooltip by adding z index
Please can some css expert help me identify the issue?
There is no need to modify the CSS of the highchart tooltip.I followed the properties used in the below URL & it worked for me:
https://www.highcharts.com/demo/sparkline
I had missed out adding below chart options:
tooltip: {
outside: true,
}
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
}
}
Above is a picture of my pie chart in Highcharts when it is loading.. the empty circle displays when the pie chart is loading, I would like the empty circle to not display when the pie chart is loading and only display the whole pie chart after it is done loading, Is there an option to do this?
Here is an example js fiddle
https://jsfiddle.net/gdm0wpey/
series: [
{
name: "Browsers",
colorByPoint: true,
}
],
We see that when the pie chart data is removed, the base empty pie still stays there. I believe that this is connected to getting the base empty pie to be removed when the chart is loading as well. I can't show a live demo of that because it requires loading data from an API
You can hide empty pie series by setting borderWidth to 0.
series: [{
borderWidth: 0,
...
}]
Live demo: https://jsfiddle.net/BlackLabel/4j7fa6d1/
API Reference: https://api.highcharts.com/highcharts/series.pie.borderWidth
Or use showLoading and hideLoading chart's methods:
chart.showLoading();
// async function
chart.series[0].setData([1, 2, 3]);
chart.hideLoading();
Live demo: https://jsfiddle.net/BlackLabel/kpbLr6n4/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#showLoading
One option to remove the border is to set the border width to 0 in the plotOptions for pie:
Highcharts.chart('container', {
/* ... options ... */
plotOptions: {
pie: {
borderWidth: 0
}
}
});
Other option could be:
Overwrite the class with custom css styles:
Example:
/* This is the css class name of the pie chart when has no data: */
.highcharts-empty-series {
stroke: #ffffff !important; /* the same color of the background in your jsfiddle example. */
}
Here is the modified jsfiddle.
Also, consider use the noData option - from the documentation:
noData
Options for displaying a message like "No data to display". This
feature requires the file no-data-to-display.js to be loaded in the
page. The actual text to display is set in the lang.noData option.
Requires
modules/no-data-to-display
Try it
Line chart with no-data module
Pie chart with no-data module
I need to show the label values inside the Highcharts bar chart. It can be implemented using dataLabels.Formatter function.
But when the bar is in consist-able size the labels are shown inside the bar and it is looking good. In some cases, the bar is very small in size comparing to the label.
Please see the code pen here, https://codepen.io/JGSpark/pen/YzzBydv?editors=1010
The last bar is very small and 40 is showing outside. As the color: 'white' is commonly used for all the labels it is showing in white though it is in outside.
How can I change the color of the label if it is showing out?
In this example, I need to change the color of label 40 to black. Any suggestions?
You need to add custom formatter which will check the size of yAxis value and will change the color of label accordingly:
formatter: function() {
var max = this.series.yAxis.max,
color = this.y / max < 0.05 ? 'black' : 'white'; // 5% width
return '<p style="color: ' + color + '">' + this.y + ' M</p>';
},
If your chart is not a dynamically created you can set the dataLabels.color for the particular point.
{
y: 40,
dataLabels: {
color: 'black'
}
}
Demo
API
EDIT
Another solution which I can suggest is to add a functionality inside the chart.events.load which will filter if dataLabels is aligned to left or right and set wanted color - it will work if more labels will be outside the column bar.
events: {
load() {
let chart = this,
series = chart.series;
series[0].points.forEach(p => {
if (p.dataLabel.alignOptions.align === 'left') {
p.dataLabel.css({
color: 'black'
})
}
})
}
}
Demo
API
I have a line chart with a y axis scale that has ticks with a step size of 5, I would like to have the gridlines have a step/interval of 1. I can't see an obvious way to do it, is there anyway to achieve this in chart.js?
Thanks in advance!
Unfortunately, with the current Chart.js API, there is no clean way to configure gridline placement independent from tick placement. In other words you cannot configure an axis to show a tick every 5 steps while still showing gridlines every 1 step.
Even though there is no clean way, there is however, still a way to get the behavior your after.
The below configuration will give you the desired results, but the only drawback is the gridlines still extend beyond the axis for the hidden tick labels (e.g. it looks a little funny).
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
stepSize: 1
},
callback: function(value, index, values) {
if (value % 5 === 0) {
return value;
} else {
return ' ';
}
},
}]
}
}
});
Here is a working example via codepen.
In this fiddle what I'm after is giving all the 0s in the YAxis a grey colour without affecting the numbers that are bigger than 0. The issue here is that they are contained in the same SVG tag: <tspan>3000</tspan>. Is there a way I can target a particular text value inside a tag using css? i.e.
tspan[0]{
color: #808080;
}
Or is there a way I can do that using Highcharts' yAxis.labels.formatter ?
This is totally hacky, but I got it to work. Under yaxis:
labels: {
formatter: function () {
var label = this.axis.defaultLabelFormatter.call(this);
label = label.replace(/(0+$)/,'<span style="color: #ccc;">$1</span>');
return label;
}
},