Change font family of labels in piechart and linechart in chartjs - css

I want to change font of legend and labels in line chart and pie-chart how can i do it ?
i almost try everything but unfortunately nothing work
i try below ways :
<Pie
data={state}
defaultValue={resources.length + other}
plugins={{
//#ts-ignore
font: {
weight: 'bold',
size: 100,
family: 'IranYekanFa',
}
}}
options={{
title: {
display: true,
text: "",
fontColor: 'rgb(160,0,255)',
fontSize: 30,
fontFamily:"IranYekanFa",
},
legend: {
labels: {
fontFamily:"IranYekanFa !important" ,
}
},
animation: {
duration: 0, // general animation time
},
}}
/>
even try css :
.piechart-parent-div{
font-family:"IranYekanFa" !important;
}
nothing work !


Since the font does not change it seems you are working with V3, v3 has some major braking changes like how scales got defined and changes in namespaces so are your title and legend config in the wrong place, also the way you define the font is wrong, for all the changes please read the migration guide.
Working example of changed font:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
legend: {
labels: {
font: {
family: 'Comic Sans MS',
}
}
},
},
scales: {
x: {
ticks: {
font: {
family: 'Comic Sans MS'
},
reverse: false
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Related

Placing Data Labels Outside Pie or Doughnut Chart - Chart.js

I am working on a large scale application and it would be very helpful to place the labels on either pie charts or doughnut charts outside of the chart itself.
This plugin, outerLabels is exactly what I am looking for but I am having trouble getting it to output anything.
I have been unable to find a way to get this done using Chart.js and that is what I am stuck working with for now.
I have imported the plugin both like
import {} from 'chartjs-plugin-outerlabels';
and also like import 'chartjs-plugin-outerlabels';
Here is an example of how I am setting the chart options:
function getPieChartOptions(chartTitle: string) {
const options: ChartOptions = {
responsive: true,
plugins: {
outerLabels: {
fontNormalSize: 12,
fontNormalFamily: 'sans-serif',
},
legend: {
display: true,
labels: {
usePointStyle: true,
font: {
family: 'sans-serif',
size: 12,
}
}
},
title: {
display: true,
text: chartTitle,
color: 'black',
padding: 5,
font: {
size: 16,
family: 'sans-serif',
}
},
datalabels: {
color: 'white',
formatter: commas.format,
}
},
};
return options;
}
Here is an example of a doughnut chart within the project itself:
If anybody can help getting this plugin to work, or has another solution to this problem it would be greatly appreciated!

This works for me without the datalabels field (as it requires installing chartjs-plugin-datalabels.js library).
So basically the ChartOptions setting is similar to the one you provided.
import 'chartjs-plugin-outerlabels';
getPieChartOptions(chartTitle: string) {
const options: ChartOptions<'doughnut'> = {
responsive: true,
plugins: {
outerLabels: {
fontNormalSize: 12,
fontNormalFamily: 'sans-serif',
},
legend: {
display: true,
labels: {
usePointStyle: true,
font: {
family: 'sans-serif',
size: 12,
},
},
},
title: {
display: true,
text: chartTitle,
color: 'black',
padding: 5,
font: {
size: 16,
family: 'sans-serif',
},
},
tooltip: {
enabled: false,
},
},
};
return options;
}
And this is how to render the chart to the canvas element.
#ViewChild('MyChart', { static: true }) chart: ElementRef<HTMLCanvasElement>;
ngAfterViewInit() {
const ctx = this.chart.nativeElement.getContext('2d');
new Chart<'doughnut'>(ctx, {
type: 'doughnut',
data: {
labels: [['Download', 'Sales'], ['In', 'Store', 'Sales'], 'Mail Sales'],
datasets: [
{
data: [300, 500, 100],
},
],
},
options: this.getPieChartOptions('doughnut'),
} as ChartConfiguration<'doughnut'>).draw;
}
Demo # StackBlitz

Display uniform dates on x-axis in chart js in angular

I am displaying line chart using chart js in angular. In x-axis I am showing date which is dynamic which is coming from api. I tried "type:'linear'" but still it is not working.
I want that dates which I am displaying should be uniform.
my component.html
<canvas id="myChart"></chart>
my component.ts file
ngOnInit(){
this.chart = document.getElementById('myChart')
this.loadchart();
}
loadchart(){
new Chart(this.chart, {
type: 'line',
data: {
datasets: [{
data: this.carArray,
label: 'No. of car',
backgroundColor: 'rgba(255, 99, 132, 1)',
fill:true
},
{
data: this.priceArray,
label: 'price',
backgroundColor: 'rgba(255, 99, 132, 1)',
fill:true
}],
labels: this.dateArray,
},
options: {
elements:{
point: {
radius:1
},
},
plugins: {
legend: {
display:true
}
},
responsive: true,
scales: {
y: {
grid: {
borderDash:[1,2],
},
brginAtZero: true
},
x: {
ticks:{
color: 'blue'
},
grid: {
tickColor: 'red',
borderDash:[1,2],
},
brginAtZero: true
}
}
}
})
}
I want to display uniform dates on x axis.

HighCharts scatter plot with Datetime on X Axis not plotting values correctly

I am creating a highchart scatter plot with epoch DateTime values on X-Axis and a float value on Y-Axis. The problem is when I use label formatter to convert the epoch time value to a readable time value ("DD-MMM-YYYY"), multiple labels with the same caption are created on X-Axis, and the points do not align vertically with the tick marks on the X-axis.
I have created a JSFiddle for it (Link). What can I do to resolve this problem...
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Errors'
},
subtitle: {
text: 'Source: Temp Data'
},
xAxis: {
allowDecimals: false,
title: {
text: 'days',
scalable: false
},
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%d-%b-%y', moment.unix(this.value));
}
},
tickPixelInterval: 100
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{"name":"Positive Influencer","data":[[1448994600,41.40329],[1448994600,20.19966],[1449081000,32.26196],[1449167400,45.44334],[1449167400,43.79153],[1449167400,41.07479],[1449167400,24.75943],[1449167400,59.41171],[1449167400,62.26523],[1449167400,43.51655],[1449167400,41.14505],[1449253800,49.21474],[1449253800,41.14505],[1449253800,41.14505],[1449253800,59.45902],[1449340200,29.63791],[1449340200,31.5257],[1449426600,12.77947],[1449426600,16.81416],[1449426600,17.47938]],"color":"#A9D18E"},{"name":"Negative Influencer","data":[[1448908200,21.79101],[1448908200,21.79101],[1448908200,21.79101],[1448908200,17.06943],[1448908200,33.64876],[1448908200,11.28691],[1448908200,18.40087],[1448908200,16.87335],[1448908200,50.01515],[1448908200,20.16196],[1448908200,20.16196],[1448908200,20.16196],[1448908200,20.16196],[1448908200,20.16196],[1448908200,35.88634],[1448908200,20.16196],[1448908200,34.89129],[1448908200,12.91103],[1448908200,12.91103],[1448908200,12.91103],[1448908200,20.16196],[1448908200,24.0311],[1448994600,26.38517],[1448994600,11.80575],[1448994600,10],[1448994600,20.07552],[1448994600,32.33444],[1448994600,32.33444],[1448994600,20.16196],[1448994600,24.24678],[1448994600,26.86968],[1448994600,26.86968],[1449081000,16.27982],[1449081000,13.02332],[1449081000,25.71094],[1449081000,20.14183],[1449081000,11.01994],[1449081000,27.91542],[1449081000,27.91542],[1449081000,15.11342],[1449167400,29.38302],[1449167400,42.58746],[1449167400,13.3506],[1449167400,57.63139],[1449167400,46.52709],[1449167400,46.52709],[1449167400,27.91542],[1449167400,22.57789],[1449167400,20.14183],[1449167400,30.69887],[1449167400,18.12275],[1449167400,30.19594],[1449167400,30.19594],[1449253800,46.52709],[1449253800,13.3506],[1449253800,30.69887],[1449253800,12.30569],[1449253800,12.30569],[1449253800,11.81466],[1449253800,13.9246],[1449253800,11.80575],[1449253800,11.80575],[1449253800,18.12275],[1449253800,18.12275],[1449253800,27.91542],[1449253800,16.27982],[1449253800,16.27982],[1449253800,16.27982],[1449253800,16.27982],[1449253800,47.37541],[1449253800,16.27982],[1449253800,64.55871],[1449253800,42.33084],[1449253800,16.27982],[1449253800,22.57789],[1449253800,22.57789],[1449253800,16.27982],[1449253800,16.27982],[1449253800,50.01515],[1449253800,22.57789],[1449253800,12.91103],[1449253800,18.12275],[1449253800,81.70462],[1449253800,21.86977],[1449253800,22.57789],[1449253800,42.14268],[1449253800,21.1656],[1449253800,44.74439],[1449253800,30.48095],[1449253800,17.63912],[1449253800,42.34763],[1449253800,23.14725],[1449253800,28.20117],[1449340200,22.57789],[1449340200,24.12882],[1449340200,20.14183],[1449340200,22.57789],[1449340200,18.81954],[1449426600,24.12882],[1449426600,15.08914],[1449426600,21.53001],[1449426600,15.08914],[1449426600,15.08914],[1449426600,14.8175],[1449426600,15.08914],[1449426600,23.64472],[1449426600,49.31941],[1449426600,49.31941],[1449426600,49.31941],[1449426600,49.31941],[1449426600,49.31941],[1449426600,30.59185],[1449426600,30.59185],[1449426600,30.59185],[1449426600,23.64472],[1449426600,18.12275],[1449426600,18.12275],[1449426600,19.01658],[1449426600,10],[1449426600,10],[
1449426600,10]],"color":"#FF5252"}]
});
});

TL:DR
Make your x axis tick marks fall at midnight with tickInterval: (24 * 3600 * 1000)
Detailed answer
You said that you saw "multiple labels with same caption are created on X Axis". However when I view your fiddle in a recent version of Google Chrome, the x axis looks clean, though the tickmarks don't align perfectly with the days:
I suggest you try different browsers to see if your issue is caused by a particular browser version.
You said in your comment that if you maximize the chart in a larger window, some of the date labels are repeated.
I suggest you make a simpler plot to try to nail down your issue(s).
Update
If you change your formatter function to include the time as well as the date:
Highcharts.dateFormat('%d-%b-%y %H:%M', moment.unix(this.value))
each tickmark will have a different label, even if they fall on the same day:
Alternatively, customize the layout of the tick marks so that they always fall on midnight.
Update 2
I made a simplified demo to show tick marks and data both aligned with midnight. The important features are:
tickInterval: (24 * 3600 * 1000) // the number of milliseconds in a day.
and:
[Date.UTC(2015, 11, 01), 75], // pure JavaScript to return a unix time (in milliseconds since unix epoch) of midnight on the 1st of December
$(function() {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Datetime scatter plot demo'
},
subtitle: {
text: 'for Stack Overflow'
},
xAxis: {
tickInterval: (24 * 3600 * 1000), // the number of milliseconds in a day
allowDecimals: false,
title: {
text: 'Date',
scalable: false
},
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%d-%b-%y', (this.value));
}
}
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
"name": "Demo values",
"data": [
[Date.UTC(2015, 11, 01), 75],
[Date.UTC(2015, 11, 02), 70],
[Date.UTC(2015, 11, 02), 80],
[Date.UTC(2015, 11, 02), 45],
[Date.UTC(2015, 11, 03), 65],
[Date.UTC(2015, 11, 03), 40],
[Date.UTC(2015, 11, 05), 75]
]
}],
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

How to change the font family of Highchart to Bootstrap css default font family

I want to change the font of title, data label and tooltip to Bootstrap default default font in the pie chart (I'm using Highchart library to show the chart). I'm How can I change these? Tried to add fontFamily but it didn't work.
var chart = new Highcharts.Chart({
chart: {
renderTo: $(element).attr('id'),
backgroundColor: '#F8F8F8'
},
title: {
text: "Space Used by Users",
fontFamily: 'Helvetica'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.sizeText}',
style: {
fontSize: '11px'
}
},
showInLegend: true
}
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.sizeText}</b>'
},
series: [{
type: 'pie',
data: [
{
name: 'Personal Usage',
y: scope.item.personalUsage,
sizeText: scope.item.personalUsageSizeText
},
{
name: 'Shared Usage',
y: scope.item.sharedUsage,
sizeText: scope.item.sharedUsageSizeText
}
]
}]
});
How to change the font to default bootstrap?

You are only setting the font for the chart title. The below code sets the font globally for the pie chart.
Highcharts.setOptions({
chart: {
style: {
fontFamily: 'Helvetica'
}
}
});

Date format on chart from unix

Have put together a simple chart in Highcharts which is compiling from data supplied:
$(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
credits: {
enabled: false
},
title: {
text: 'Chart'
},
xAxis: {
type: 'datetime'
},
rangeSelector: {
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
fill: 'white'
},
select: {
style: {
color: 'white'
}
}
}
},
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'silver',
fontWeight: 'bold'
},
selected: 1
},
series: [{
name: 'Data',
data: [
[1325376000,102.2],
[1328054400,104.5],
[1330560000,106.7],
[1333238400,109.8],
[1335830400,122.1],
[1338508800,124.3],
]
}]
});
});
However, the date data (e.g. 1325376000) renders simply as hours on the x-axis on the chart and the dates show in the top appear as 1970... can you tell me where I have gone wrong? Many thanks.

Highcharts expects its dates in milliseconds. I think you are supplying seconds?

You have i.e 1325376000 which is timestamp, (date in 1970). Do you use UNIX timestamps or other? Which date should be? You can use i.e Date.UTC() to prepare appropaite date http://www.w3schools.com/jsref/jsref_utc.asp

Resources