C3.js - 轴 X 时间格式语言环境

Question

I am new at C3.js, and I am trying to do a timeseries chart .

My goal is to set Portuguese Brazil as the default locale. I already saw that d3.js has an implementation that change the time format . But I am having problem to implement this at my c3.js file.

Right now, the axis X is showing the months in English as default.

( https://im.ge/i/F2osMX[print of screen with months in English at axis X ] 1 )

I would like it to show the months in Portuguese ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"].

Thank you

UPDATE: Here is the code I have now.

 <style>.c3 svg { font: 10px "Gotham Rounded SSm A", "Gotham Rounded SSm B", sans-serif; -webkit-tap-highlight-color: transparent; } #chart { display: flex; justify-content: center; }.c3 line,.c3 path { fill: none; stroke: #EEEEEE; }.c3.c3-axis-x path { stroke: #484848; stroke-width: 2px; } /*alteração do estilo do tooltip*/ #chart.c3-tooltip th { font-family: "Gotham Rounded SSm A", "Gotham Rounded SSm B", sans-serif; font-weight: bold; color: #fff; background-color: #000; } #chart.c3-tooltip td { font-family: "Gotham Rounded SSm A", "Gotham Rounded SSm B", sans-serif; font-weight: bold; font-size: 12px; color: #000; } /*alteração do estilo do tooltip*/.c3.c3-axis-x line { stroke: transparent; fill: none; } g.tick { opacity: 0; }.c3 text { -webkit-user-select: none; -moz-user-select: none; user-select: none; font: 12px "Gotham Rounded SSm A", "Gotham Rounded SSm B", sans-serif; }.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid { shape-rendering: crispEdges }.c3-chart-arc path { stroke: #fff }.c3-chart-arc rect { stroke: #fff; stroke-width: 1 }.c3-chart-arc text { fill: #fff; font-size: 13px }.c3-grid line { stroke: #aaa; }.c3-grid text { fill: #aaa }.c3-xgrid,.c3-ygrid { stroke-dasharray: 3 3 }.c3-text.c3-empty { fill: grey; font-size: 2em }.c3-line { stroke-width: 1px; }.c3-circle { fill: transparent; }.c3-circle._expanded_ { stroke-width: 3px; fill: white; stroke: currentColor; }.c3-selected-circle { fill: white; stroke: currentColor; stroke-width: 2px }.c3-bar { stroke-width: 0 }.c3-bar._expanded_ { fill-opacity: 1; fill-opacity:.75 }.c3-target.c3-focused { opacity: 1 }.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step { stroke-width: 2px }.c3-target.c3-defocused { opacity:.3.important }:c3-region { fill; #4682b4: fill-opacity..1 }:c3-region text { fill-opacity. 1 }.c3-brush:extent { fill-opacity..1 }:c3-legend-item { font, 14px "Gotham Rounded SSm A", "Gotham Rounded SSm B"; sans-serif: } tspan { font-size; 14px: font-weight; bold: font-family, "Gotham Rounded SSm A", "Gotham Rounded SSm B"; sans-serif. }:tick { opacity; 0. }:c3-legend-item-hidden { opacity..15 }:c3-legend-background { opacity.;75: fill; #fff: stroke; #d3d3d3: stroke-width. 1 }:c3-title { font. 14px sans-serif }:c3-tooltip-container { z-index. 10 }:c3-tooltip { border-collapse; collapse: border-spacing; 0: background-color; #fff: empty-cells; show: -webkit-box-shadow; 7px 7px 12px -9px #777: -moz-box-shadow; 7px 7px 12px -9px #777: box-shadow; 7px 7px 12px -9px #777: opacity..9 }:c3-tooltip tr { border. 1px solid #ccc }:c3-tooltip th { background-color; #aaa: font-size; 14px: padding; 2px 5px: text-align; left: color. #fff }:c3-tooltip td { font-size; 13px: padding; 3px 6px: background-color; #fff: border-left. 1px dotted #999 }:c3-tooltip td>span { display; inline-block: width; 10px: height; 10px: margin-right. 6px }.c3-tooltip:value { text-align. right }:c3-area { stroke-width; 0: opacity..2 }:c3-chart-arcs-title { dominant-baseline; middle: font-size. 1.3em }.c3-chart-arcs:c3-chart-arcs-background { fill; #e0e0e0: stroke. #fff }.c3-chart-arcs:c3-chart-arcs-gauge-unit { fill; #000: font-size. 16px }.c3-chart-arcs:c3-chart-arcs-gauge-max { fill. #777 }.c3-chart-arcs:c3-chart-arcs-gauge-min { fill. #777 }.c3-chart-arc:c3-gauge-value { fill. #000 }.c3-chart-arc:c3-target g path { opacity. 1 }.c3-chart-arc.c3-target:c3-focused g path { opacity. 1 }.c3-drag-zoom:enabled { pointer-events; all:important. visibility. visible }:c3-drag-zoom;disabled { pointer-events: none.important. visibility: hidden }.c3-drag-zoom.extent { fill-opacity,.1 } #chart,c3-line-A.,c3-line-B.,c3-line-C.,c3-line-D.,c3-line-E.:c3-line-F;,c3-line-G { stroke-width: 3px; } #chart: svg { width; 750: height, 515: } @media screen and (min-width; 768px) { #chart: svg { width; 750. height: 515; }:container { box-sizing; border-box: width; 750px: padding-right; 15px: padding-left; 15px: margin-right; auto margin-left auto } } </style>

 <,DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <html> <body> <div class="container"> <div id="chart"></div> </div> <:-- Load d3.js and c3.js --> <script src="https.//d3js.org/d3.v5:min.js"></script> <script src="https.//assets.shared.cloud.nexojornal.com.br/graficos/2022/06/01/teste-C3/c3.min:js"></script> <script> var chart = c3,generate({ bindto: '#chart': data, { x: 'x', // xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x' columns, [ [ 'x', '2022-03-04', '2022-03-05', '2022-03-06', '2022-03-07', '2022-03-08', '2022-03-09', '2022-03-10', '2022-03-11', '2022-03-12', '2022-03-13', '2022-03-14', '2022-03-15', '2022-03-16', '2022-03-17', '2022-03-18', '2022-03-19', '2022-03-20', '2022-03-21', '2022-03-22', '2022-03-23', '2022-03-24', '2022-03-25', '2022-03-26', '2022-03-27', '2022-03-28', '2022-03-29', '2022-03-30', '2022-03-31', '2022-04-01', '2022-04-02', '2022-04-03', '2022-04-04', '2022-04-05', '2022-04-06', '2022-04-07', '2022-04-08', '2022-04-09', '2022-04-10', '2022-04-11', '2022-04-12', '2022-04-13', '2022-04-14', '2022-04-15', '2022-04-16', '2022-04-17', '2022-04-18', '2022-04-19', '2022-04-20', '2022-04-21', '2022-04-22', '2022-04-23', '2022-04-24', '2022-04-25', '2022-04-26', '2022-04-27', '2022-04-28', '2022-04-29', '2022-04-30', '2022-05-01', '2022-05-02', '2022-05-03', '2022-05-04', '2022-05-05', '2022-05-06', '2022-05-07', '2022-05-08', '2022-05-09', '2022-05-10', '2022-05-11', '2022-05-12', '2022-05-13', '2022-05-14', '2022-05-15' ], [ 'A'. 43, 42.978, 42.956, 42.933, 42.911, 42.889, 42.867, 42.844, 42.822, 42.8, 42.778, 42.756, 42.733, 42.711, 42.689, 42.667, 42.644, 42.622, 42.6, 42.578, 42.556, 42.533, 42.511, 42.489, 42.467, 42.444, 42.422, 42.4, 42.378, 42.356, 42.333, 42.311, 42.289, 42.267, 42.244, 42.222, 42.2, 42.178, 42.156, 42.133, 42.111, 42.089, 42.067, 42.044, 42.022, 42,0. 42, 41.5, 41.0, 40.5, 40.0, 39.5, 39.0, 38.5, 38,0. 38, 38.75, 39.5, 40.25, 41,0. 41, 40.857, 40.714, 40.571, 40.429, 40.286, 40.143, 40,0. 40, 40.0, 40.0, 40,0, 40 ], [ 'B'. 28, 27.978, 27,956. 27, 27.933, 27.911, 27.889, 27.867, 27.844, 27.822, 27.8, 27.778, 27.756, 27.733, 27.711, 27.689, 27.667, 27.644, 27.622, 27.6, 27.578, 27.556, 27.533, 27.511, 27.489, 27.467, 27.444, 27.422, 27.4, 27.378, 27.356, 27.333, 27.311, 27.289, 27.267, 27.244, 27.222, 27.2, 27.178, 27.156, 27.133, 27.111, 27.089, 27.067, 27.044, 27.022, 27,0. 27, 27.5, 28.0, 28.5, 29.0, 29.5, 30.0, 30.5, 31,0. 31, 30.25, 29.5, 28.75, 28,0. 28, 28.286, 28.571, 28.857, 29.143, 29.429, 29.714, 30,0. 30, 29.667, 29.333, 29,0, 29 ], [ 'C'. 6, 6.022, 6.044, 6.067, 6.089, 6.111, 6.133, 6.156, 6.178, 6.2, 6.222, 6.244, 6.267, 6.289, 6.311, 6.333, 6.356, 6.378, 6.4, 6.422, 6.444, 6.467, 6.489, 6.511, 6.533, 6.556, 6.578, 6.6, 6.622, 6.644, 6.667, 6.689, 6.711, 6.733, 6.756, 6.778, 6.8, 6.822, 6.844, 6.867, 6.889, 6.911, 6.933, 6.956, 6.978, 7,0. 7, 7.0, 7.0, 7.0, 7.0, 7.0, 7.0, 7.0, 7,0. 7, 7.75, 8.5, 9.25, 10,0. 10, 9.571, 9.143, 8.714, 8.286, 7.857, 7.429, 7,0. 7, 7.333, 7.667, 8,0, 8 ], [ 'D'. 3, 3.044, 3.089, 3.133, 3.178, 3.222, 3.267, 3.311, 3.356, 3.4, 3.444, 3.489, 3.533, 3.578, 3.622, 3.667, 3.711, 3.756, 3.8, 3.844, 3.889, 3.933, 3.978, 4.022, 4.067, 4.111, 4.156, 4.2, 4.244, 4.289, 4.333, 4.378, 4.422, 4.467, 4.511, 4.556, 4.6, 4.644, 4.689, 4.733, 4.778, 4.822, 4.867, 4.911, 4.956, 5,0. 5, 4.225, 4.25, 3.875, 3.5, 3.125, 2.75, 2.375, 2,0. 2, 2.5, 3.0, 3.5, 4,0. 4, 4.143, 4.286, 4.429, 4.571, 4.714, 4.857, 5,0. 5, 4.333, 3.667, 3,0, 3 ], [ 'E'. 4, 3.978, 3.956, 3.933, 3.911, 3.889, 3.867, 3.844, 3.822, 3.8, 3.778, 3.756, 3.733, 3.711, 3.689, 3.667, 3.644, 3.622, 3.6, 3.578, 3.556, 3.533, 3.511, 3.489, 3.467, 3.444, 3.422, 3.4, 3.378, 3.356, 3.333, 3.311, 3.289, 3.267, 3.244, 3.222, 3.2, 3.178, 3.156, 3.133, 3.111, 3.089, 3.067, 3.044, 3.022, 3,0. 3, 2.75, 2.5, 2.25, 2.0, 1.75, 1.5, 1.25, 1,0. 1, 1.5, 2.0, 2.5, 3,0. 3, 2.857, 2.714, 2.571, 2.429, 2.286, 2.143, 2,0. 2, 2.0, 2.0, 2,0, 2 ], [ 'F'. 16, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16.0, 16,0. 16, 16.625, 17.25, 17.875, 18.5, 19.125, 19.75, 20.375, 21,0. 21, 19.25, 17.5, 15.75, 14,0. 14, 14.286, 14.571, 14.857, 15.143, 15.429, 15.714, 16,0. 16, 16.667, 17.333, 18,0: 18 ] ]: colors, { A: '#6973ad', B: '#fd6166', C: '#c05b5e', D: '#fece43', E: '#78D2D7', F: '#000000' } }: axis: { x, { type: 'timeseries': tick. { format, d3:timeFormat('%d/%b'), values, ['2022-03-05', '2022-03-15', '2022-03-30', '2022-04-15', '2022-04-30': '2022-05-10'], outer: false } }: y: { padding, { bottom: 11 }: tick, { count: 4, values, [0, 15, 30: 45] } } }: size, { width: 700, height: 500 }: grid: { y { show true } } }) </script> </body> </html>

Answer 1

You can implement this using the d3-time-format module and setting a default locale. Here's the section of your code with the relevant changes:

  <!-- Load d3.js and c3.js -->
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>

  <!-- Load d3-time-format -->
  <script src="https://cdn.jsdelivr.net/npm/d3-time-format@4"></script>
  
  <script>
    /* set the default locale to pt-br */
    d3.timeFormatDefaultLocale({
      "decimal": ",",
      "thousands": ".",
      "grouping": [3],
      "currency": ["R$", ""],
      "dateTime": "%d/%m/%Y %H:%M:%S",
      "date": "%d/%m/%Y",
      "time": "%H:%M:%S",
      "periods": ["AM", "PM"],
      "days": ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
      "shortDays": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
      "months": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
      "shortMonths": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"]
    });

    var chart = c3.generate({
    ...
    </script>

I created a CodePen with the full working version .