I would like to place orange dots like such on a highcharts:
http://www.dev2one.com/econometering/highcharts/graph-conso.jpg
Any suggestion how to make them ? and style them too
Thanks alot
Regards
The first place to look is the Highcharts API which you can find here:
http://api.highcharts.com/highcharts
To remove the lines and format the marker, you need to look at the plotOption.line. In your fiddle, you have added the lineWidth: 0, to the marker but you should have added it to the series like this:
plotOptions: {
series: {
marker: {
fillColor: '#F27D00',
},
lineWidth: 0,
}
},
http://jsfiddle.net/dqepok9d/1/
Related
I have created a chart with 3 points. I have added two graphical elements as circle and rectangle (line) for dragging the points.
Circle dragging should apply for all three points in the graph as in the expected behavior screenshot below.
Line dragging is a vertical shift for graph to move it vertically.
Circle dragging does not apply for all 3 points when I return both graphical elements in the elements array as in the code. It just applies only for 1st point.
When I return one graphical element at a time it works.
Current Behaviour
image of how chart works now
Below I have included the code which returns graphic elements
myChart.setOption({
graphic: data.map(function (item, dataIndex) {
let rec = {
type: 'group',
left: 'center',
position: myChart.convertToPixel('grid', item),
draggable: 'vertical',
ondrag: function (dx, dy) {
onPointDraggingLine(dataIndex, [this.x, this.y]);
},
children: [
{
type: 'rect',
top: '200x',
shape: {
width: 470,
height: 0
},
style: {
stroke: 'gray',
lineWidth: 5,
lineDash: [6]
},
cursor: 'move'
}
]
};
let onlyCrc = {
type: 'circle',
position: myChart.convertToPixel('grid', item),
draggable: true,
ondrag: function (dx, dy) {
onPointDragging(dataIndex, [this.x, this.y]);
},
shape: {
cx: 0,
cy: 0,
r: symbolSize / 2
},
invisible: false,
z: 100,
cursor: 'move'
};
return { elements: [rec, onlyCrc] };
})
});
I have tried to return graphical elements as array of objects .And I have tried by giving a condition for dataIndex while mapping. but didn't work. Expected behavior is as below.
Expected Behavior.
image of how chart should work
Below I have attached the whole code I tried in Codepen.
Link to Minimal Reproduction
https://codepen.io/rushaidrilaf/pen/bGKONRj
I was able to Solve this. Started to resolve it by pointing the dragging function to 2nd point in the graph and updating the position of circular graphical element while dragging the horizontal line.
solution can be viewed from this link
https://codepen.io/rushaidrilaf/pen/bGKONRj
enter code here
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
Chart.js is amazing, but I'm using angularjs chart.js directive. I can turn off all dots on all lines with the below code where vm.options is set to the chart-options attribute:
vm.options = {
elements: {
point: {
radius: 0
}
}
};
However, I'd only like to hide the dots on 2 of the 3 datasets I have and I'm not sure how to get that for angularjs chart.js. My dataset's is just an array of arrays of data (not an object), and when I look at chart.js and how they hide dots they do it on a dataset object, but that doesn't match how I'm doing my datasets so I'm confused.
you can use pointRadius: 0 in your $scope.datasetOverride to turn off dots for each dataset
$scope.datasetOverride = [{
label: "No Dots Line",
fill: true,
pointRadius: 0,
}];
https://codepen.io/vfx/pen/dLpEgW
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