Home > OS >  C3.js - axis X time format locale
C3.js - axis X time format locale

Time:07-28

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 >
  <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>

CodePudding user response:

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.

  • Related