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
Related
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
Is it possible to achieve this -
Different colour in the same bar
Color length proportional to % of data available in that year
In total there are 4 years and I want to partition each bar into a maximum of 4 parts (can be 1, 2, 3 or 4 parts depending on years selected).
What you are searching for is something called "Stacked Bar Chart". This kind of chart can be used with the library you mentioned.
As in the documentation:
Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.
Here an example taken from the documentation:
var stackedBar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
x: {
stacked: true
},
y: {
stacked: true
}
}
}
});
Please, for more details refer to this section of the documentation:
https://www.chartjs.org/docs/next/charts/bar/#stacked-bar-chart
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 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/
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
}