Chart Js, Style some ticks on the axis differently

chart.js ticks options
chart js ticks configuration
chart js dynamic step size
chartjs minor ticks
chartjs ticks callback
chart js gridlines
chart js axis color
chart js multi axis example

I have a bar chart where on the x axis we have dates. I want to make the weekend days bold or give it a different colors.

window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                title: {
                    display: false,
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                legend: {
                    display: true,
                    position: "top"
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        stacked: true,
                        ticks: {
                            fontColor:'#CCCCCC',
                            callback: function(value, index, values) {
                                if (value.substring(0, 3) == 'Sat' || value.substring(0, 3) == 'Sun') {
                                    return value.toUpperCase();
                                } else {
                                    return  value;
                                }
                            },
                        }
                    }],
                    yAxes: [{
                        stacked: true,
                    }]
                }
            }
        });

I also looked into the minor ticks and major ticks configuration, but not sure if that's what i have to look into and how to implement that.

Use ticks in xAxes.

xAxes: [{
            ticks: {
            fontStyle: "bold"
            }
            }]

Axes ยท Chart.js documentation, Labelling ยท Styling Scales in Chart.js >v2.0 are significantly more powerful, but also different than those of v1.0. Multiple X & Y axes are supported. A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every Any linear scales created after this time would now have a minimum of 0. This happens when a custom tick value matches the value of an existing tick. Only one tick is used for any specific position on the axis. ๐Ÿ”— Tick label (smart) behavior. It is often not possible to show all axis tick labels without some overlaps. The chart includes logic to determine if a different labeling more allows more labels to be shown.

I too ran into this problem and if bolding is all you want, my solution was to use a fancy font generator and use the generated ๐˜€๐—ฎ๐—ป-๐˜€๐—ฒ๐—ฟ๐—ถ๐—ณ ๐—ฏ๐—ผ๐—น๐—ฑ text as the label attributes. Whatever works, right?

Chart Js, Style some ticks on the axis differently, Use ticks in xAxes . xAxes: [{ ticks: { fontStyle: "bold" } }]. #Creating Custom Tick Formats. It is also common to want to change the tick marks to include information about the data type. For example, adding a dollar sign ('$'). To do this, you need to override the ticks.callback method in the axis configuration. In the following example, every label of the Y axis would be displayed with a dollar sign at

Style X and Y Axis (tick mark) with Chart.js?, With Chart.js v2.1, you can write a plugin to do this. Preview. enter image description here. Script Chart.pluginService.register({ afterDraw:ย  I created a realtime chart that updates about every 10 seconds by adding a new value and removing an old one. I'm a bit unhappy about the chosen ticks of the time axis. Every 10 Minutes is fine, but I'd prefer values like 15:50,16:00,16:10

Add possibility to change style for each of the ticks ยท Issue #2442 , etimberg changed the title Add possibility yo change style for each of the ticks Add Are there any open PRs for this at the moment to make this change? Does chartjs 2.8.0 support the different color axis for different ticks? If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm. This example sets up a chart with a y axis that creates ticks at 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5.

Ticks, Grids & Interlaced Colors in Chart, Tick Marks, Grid Lines & Interlaced Colors are part of Axis and they improve CanvasJS HTML5 Chart Grid Lines Tick Marks and Interlaced Colors We assign different gridline properties to all three axis in the below snippet. but the problem is if any line has higher value then automatically y axis range take that valueย  When using multiple axis, the ticks of two or more opposite axes will automatically be aligned by adding ticks to the axis or axes with the least ticks, as if tickAmount were specified. This can be prevented by setting alignTicks to false.

Getting Started With Chart.js: Scales - Code Tuts, In the last four tutorials, you have learned a great deal about Chart.js. the tooltips and labels, change the fonts, and create different chart types. not have any descriptive text to let the viewers know what a particular axis represented. You can also control the font color, family, size, and style using theย  Other types of charts: As mentioned earlier, Chart.js provides a wide variety of chart types. The properties we study here are shared between different types of graphics, with some differences.

Comments
  • post your html code
  • Ever find a solution for this? I have the same issue.
  • No, i didn't...
  • I guess still no solution? The tick callback can only be used to replace the value itself but not its style.
  • Indeed, no solution...
  • Hi Aaron, the issue is that i want only some ticks to be bold
  • Oh My bad. sorry. will let you know if I get the solution.
  • link only answers become useless if link breaks
  • Good try but 1/ Chart Js uses canvas (no proper inspector that i know of) and 2/ how would you add a class in chart js for some ticks?
  • Hmm didn't realize we were dealing with canvas, but if you just want a nice bar chart maybe you could utilize dimplejs.org which wraps d3 for an easy charting library. Then you could use the inspector on the corresponding svg it creates and assign css classes to the specific <g> elements in the chart i.e. the x-axis labels for the months you desire.