chart: {
height:"300",
width:"600",
type: 'column',
viewBox:"0 0 1000 400"
}
The viewbox is there is not working in high chart.
Kindly give me a solution.
Once the chart is appended to the DOM. It is an SVG Node element on which you can set attribute like so:
setTimeout(function() {
var highchart = document.querySelector(".highcharts-container svg:last-of-type");
highchart.setAttribute("viewBox", "0 0 1324 400");
}, 10);
The timeout is to ensure highcharts had time to insert the graph in the DOM. The data populating itself happens after initialisation so 10ms is fine.
There is no such thing as viewBox with Highcharts.
Refer: API Documentation
To create border around chart you can use:
chart: {
height:"300",
width:"600",
type: 'column',
borderWidth:1, // around chart
plotBorderWidth:1, // around plot
}
Related
I am adding a list of markers to my chart based of certain conditions, these conditions are varying and therefore I will need to have markers that look different:
(using the setGridStrokeXStyle function doesn't seem to have an effect. What is the correct way to accomplish this?)
Markers.map((marker) => {
const chartMarker = chart.addChartMarkerXY()
.setPosition({ x: new Date(marker.x) - startDate, y: marker.y });
chartMarker
.setResultTableVisibility(UIVisibilityModes.always)
.setResultTable((table) => table
.setContent([
['Type']
])
)
.setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
.setGridStrokeYVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerXVisibility(UIVisibilityModes.whenDragged)
.setTickMarkerYVisibility(UIVisibilityModes.whenDragged)
.setDraggingMode(UIDraggingModes.notDraggable)
.setGridStrokeXStyle(new SolidLine({ fillStyle: new SolidFill({ color: ColorHEX("#FF69B4"), thickness: 2 }) })); //This doesn't seem to change the marker's appearance.
console.log("style", chartMarker.getGridStrokeXStyle());
});
The reason why in your code snippet the setGridStrokeXStyle is seemingly not having an effect is because the X grid stroke is not visible.
I have highlighted which element the "X grid stroke" is in the below picture with red to make sure:
As per why this is not visible in your example code, it is due to this method call which makes it so it is only displayed when the Chart Marker is being dragged.
.setGridStrokeXVisibility(UIVisibilityModes.whenDragged)
Furthermore, this other method call makes it so that the Chart Marker can not be dragged, which results in the X grid stroke never being visible.
.setDraggingMode(UIDraggingModes.notDraggable)
Here are some examples of styling different parts of the Chart Marker properly:
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 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.
I am having a trouble to customize the kendo chart in order that all of my data in the chart is shown correctly. As you can see on the picture bellow, the value of my data is cutted on half.
As the data is assigned dinamicaly, it's not possible to set the constant size of a chart in order to fix the problem.
Is there any option to set (f.e. css property) to fix this issue?
Or is there any way to manipulate the "max" property of a valueAxis to be always 10% bigger than the maximum loaded value.
I've already tried playing with margins and padding, or changing the width of a chart, but problem is still there.
Here is the photo:
One option is to increase the right margin of the plotArea:
plotArea: {
margin: {
right: 30
}
},
Another option is to change the label position
seriesDefaults: {
type: "bar",
labels: {
visible: true,
background: "transparent",
position: "insideEnd"
}
},
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